媒体查询断点不准确

Question

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

例如我有：

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

但是当我使用Chrome打开开发工具，观察浏览器的viewport/width，CSS规则在1226px左右生效。为什么 CSS 规则不正好应用在 1000 像素处？

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

Answer 1

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

所以您的文件后面可能有一个 max-width 的片段，比方说，1000 像素。因为它在你的 900px 之后，但屏幕尺寸使两者都有效，所以 1000px 生效。

我有一个包含更改的片段，但是因为你 post 编辑了整个 HTML 和 CSS 太长了 post .相信我，如果你把它移到最后它会起作用

Answer 2

326px绝对不是'inaccuracy'的区别。这里的东西坏了很多次。我可能猜想你有更多的媒体查询和错误的 min-width max-width 设置。

最好检查实际情况：

Firefox - 按 F12（或打开开发工具 Mac）
转到 Dev Tools 顶部栏中的 'Style Editor'
右边的列显示@media 规则列表（断点）

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

媒体查询断点不准确

Media queries breakpoints not accurate

html

css

media-queries