如何为基本博客模板添加响应式媒体查询

Question

如何为基本博客模板添加响应式媒体查询，我尝试了谷歌搜索结果，但从来没有看到发现。最后我决定问专家。这个怎么做 ？

这是我的博客网站Gossip Lanka任何人都可以帮助我如何创建这个模板更具响应性。

Answer 1

如果您的意思是在较小的设备（如移动设备）上显示您的博客，则需要在您的css文件中添加@media查询。对于像三星Galaxy S5这样的智能手机设备，你会想要这样的东西。

@media screen and (max-width: 360px){ 
      #id or .class{ 
        code... 
      } 
} 

另外，你需要在你的脑袋

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

这个工作。

添加这些查询将在移动设备上显示时调整您的CSS。还有其他宽度尺寸，您可以研究其他尺寸的设备，如平板电脑。