Question

我正在为一个页面创建媒体查询，但我遇到了让他们在我的媒体查询中指定的点完全中断的问题。

例如我有：

@media all and (max-width:1000px) {
    header nav ul.nav_items li a {
        padding:15px 10px 15px;        
    }
}

但是当我使用Chrome并打开开发工具并观察浏览器的视口/宽度时，CSS规则在1226px左右生效。为什么CSS规则不能正好应用于1000px？

这是我的HTML / CSS的jsfiddle：https://jsfiddle.net/at68m0zp/

Answer 1

通过将媒体查询移动到CSS文件的 end ，您将使其覆盖设置值。后来的东西出现（并且它越具体），它收到的偏好越多。由于您的查询位于文件的开头，因此稍后不会对您的标头导航显示属性进行任何更改。请注意，媒体查询不会增加特异性或获得任何特殊处理，它们会被忽略，直到它们处于由它们定义的范围内。

因此，您的文件中可能会有一个片段，其最大宽度为1000px。因为它是在你的900px之后，但屏幕尺寸同时有效，1000px的一个生效。

我有一个包含更改的片段，但因为您发布了整个HTML和CSS，所以发布此处的时间太长了。相信我，如果你把它移到最后就行了

Answer 2

326px差异绝对不是'不准确'。这里有些事情很重要。我可能会猜到你有更多的媒体查询，并且错误min-width max-width设置了一些。

最好检查实际情况：

通过调试获得乐趣和好运。