Question

我用：

@media(max-width:992px){
    h3{
        color:red;
    }
}

但是在浏览器中，似乎更改不会发生在992px，而是当屏幕尺寸为887px或更低时。我已经尝试逐个禁用css文件，但问题似乎并没有消失。我无法弄清问题是什么。

编辑：它必须是HTML文件中的内容，因为当我为另一个html文件尝试相同的代码时，它可以正常工作。此外，我注意到boostrap的媒体查询也无法正常工作（例如，如果其中一个断点是1200px，则更改发生在浏览器中大约1120px）。不知道是什么原因引起的。我试过评论HTML的不同部分，但它总是一样的。

Answer 1

根据给定的示例，您似乎可能没有关闭}括号也应该像

@media screen and (max-width: 980px) {      
    h3{
      color:red;
    }    
}

您可以查看http://webdesignerwall.com/tutorials/responsive-design-in-3-steps链接以获取更多信息希望它有所帮助！

Answer 2

作为Pravin vaichal，他的猜测必须是真实的，你已经明白了“}”括号。

你应该把媒体查询min-width写到max-width。

有关响应式网站的媒体查询的详细信息，请参阅this one。

媒体查询指定的分辨率与现实不同

2 个答案: