媒体查询断点不准确

Question

我正在为一个页面创建媒体查询，但我在让它们在我的媒体查询中指定的点处发生问题时遇到问题。

比如我有：

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

但是当我使用并公开Chrome的开发者工具，并观察浏览器的视/宽，CSS规则采取的地方约1226px效果。为什么不是正好应用1000px的CSS规则？

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

Answer 1

通过移动媒体查询到你的CSS文件的年底，你会使其覆盖的设定值。后面出现的东西（以及它得到的越具体），它收到的偏好越多。由于您的查询位于文件的开头，所以稍后对标题nav的显示属性所做的任何更改都无法应用。请注意，媒体查询不会增加特殊性或得到任何特殊处理，只是在它们处于由它们定义的范围内时才会被忽略。

因此，您的文件中可能会有一段代码，其最大宽度为1000px。因为它是在900像素之后出现的，但屏幕尺寸都是有效的，所以1000像素会生效。

我有一个片段的变化，但因为你发布你的整个HTML和CSS它是太长，不能发布在这里。相信我，如果你把它移到尽头，它就会起作用

Answer 2

326px区别绝对不是'不准确'。有些事情在这里大打折扣。我可能猜测你有更多的媒体疑问，并且错误地设置了min-widthmax-width。

最好要检查什么是真正回事：

1. 火狐 - 命中F12（或开放开发工具时，在Mac）
2. 转到“样式编辑器”的开发工具顶栏
3. @右侧列显示@media规则列表（突破点）

调试时玩得开心，祝你好运。