媒体查询断点不准确答案

【问题标题】：Media queries breakpoints not accurate媒体查询断点不准确
【发布时间】：2015-11-06 11:36:32
【问题描述】：

我正在为页面创建媒体查询，但我无法让它们准确地在媒体查询中指定的点中断。

例如我有：

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

但是当我使用 Chrome 并打开开发工具并观察浏览器的视口/宽度时，CSS 规则在 1226 像素左右生效。为什么 CSS 规则没有精确地应用于 1000 像素？

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

【问题讨论】：

【解决方案1】：

通过将媒体查询移动到 CSS 文件的 end，您将使其覆盖设置值。出现的越晚（越具体），它收到的偏好就越多。因为您的查询位于文件的开头，所以稍后对标题导航的显示属性所做的任何更改都不会应用。请注意，媒体查询不会增加特异性或得到任何特殊处理，它们只会被忽略，直到它们处于它们定义的范围内。

因此，您的文件中稍后可能会有一个 sn-p，其最大宽度为 1000 像素。因为它在你的 900px 之后，但屏幕尺寸使两者都有效，所以 1000px 生效。

我有一个关于更改的 sn-p，但是因为您发布了整个 HTML 和 CSS，所以在这里发布太长了。相信我，如果你把它移到最后，它会起作用

【讨论】：

@Tony54 是不是因为他们的答案被表述为应该在 cmets 中出现的问题......？我不会对此吝啬，你做你想做的，但老实说，我相信其他答案并不能解释任何事情。但这只是我:)

【解决方案2】：

326px 差异绝对不是“不准确”。这里有些东西坏了。我可能猜想你有更多的媒体查询和错误的min-widthmax-width 设置。

最好检查实际情况：

祝您调试愉快，祝您好运。

【讨论】：