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

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。还有其他的宽度尺寸等，你可以研究其他尺寸的设备，如平板电脑。