为什么媒体查询的顺序在 CSS 中很重要？答案

【问题标题】：Why does the order of media queries matter in CSS?为什么媒体查询的顺序在 CSS 中很重要？
【发布时间】：2012-02-06 02:24:05
【问题描述】：

最近，我一直在设计响应速度更快的网站，并且经常使用 CSS 媒体查询。我注意到的一种模式是定义媒体查询的顺序实际上很重要。我没有在每个浏览器中测试它，只是在 Chrome 上测试。这种行为有解释吗？有时，当您的网站无法正常工作并且您不确定是查询还是查询的编写顺序时，这会令人沮丧。

这是一个例子：

HTML

<body>
    <div class="one"><h1>Welcome to my website</h1></div>
    <div class="two"><a href="#">Contact us</a></div>
</body>

CSS：

body{
font-size:1em; /* 16px */
}

.two{margin-top:2em;}



/* Media Queries */

@media (max-width: 480px) {
    .body{font-size: 0.938em;}

}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
       .two{margin-top:8em;}
            }
/*1024x600*/
@media (max-height: 600px) {
       .two{margin-top:4em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
       .two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
       .two{margin-top:7em;}
}

但是，如果我在最后编写 1024x600 的查询，浏览器会忽略它并应用在 CSS 开头指定的边距值 (margin-top:2em)。

/* Media Queries - Re-arranged version */

@media (max-width: 480px) {
    .body{font-size: 0.938em;}
}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
       .two{margin-top:8em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
       .two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
       .two{margin-top:7em;}
}
 /*1024x600*/
@media (max-height: 600px) {
       .two{margin-top:4em;}
}

如果我对媒体查询的理解是正确的，那么顺序应该无关紧要，但似乎确实如此。可能是什么原因？

【问题讨论】：

标签： css media-queries responsive-design

【解决方案1】：

这是 CSS 的设计——层叠样式表。

这意味着，如果您应用两个规则碰撞相同的元素，它将选择最后一个声明的规则，除非第一个具有 !important 标记或更具体（例如 html > body 与仅body，后者不太具体）。

所以，给定这个 CSS

@media (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

如果浏览器窗口为 350 像素宽，则背景将为蓝色，而使用此 CSS

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

和窗口宽度一样，背景会是红色的。两条规则确实匹配，但第二条是应用的，因为是最后一条规则。

终于有了

@media (max-width: 400px) {
  body {
    background: blue !important;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

或

@media (max-width: 400px) {
  html > body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

背景为蓝色（窗口为 350 像素宽）。

【讨论】：

谢谢。我从没想过这么简单的逻辑会毁了我一夜的睡眠。谢谢。
在样式表中，如果在没有任何媒体查询的情况下应用相同的规则，然后在小屏幕移动设备的媒体查询中，并且有一些图像要下载。那么会发生什么呢，浏览器是否会忽略没有媒体查询的规则而只应用特定媒体查询的规则？
是否有一种程序化 方式来找出哪个媒体查询（在多个匹配查询之间）会胜过其他查询？ 我的意思是类似于matchMedia() 的函数，它获取一个查询数组并且只返回一个（或不返回）...甚至根据优先级对它们进行排序。跨度>

【解决方案2】：

或者您可以将 min-width 添加到更大的媒体查询中，而不管顺序如何，都不会出现任何问题。

@media (min-width: 400.1px) and (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

使用此代码，以任何顺序，对于宽度为 400.1px-600px 的分辨率，背景颜色将始终为红色，对于宽度为 400px 或更小的分辨率，背景颜色将始终为蓝色。

【讨论】：

我在 CSS 中看到像 400.1px 这样的值时感到畏缩。或 1023px、1025px 等。
@Monstieur 1023px 或 1025px 有什么问题？
@simanacci 这表示一个黑客工作，而不是逻辑上正确的 CSS。
@Monstieur Yikes，我一直使用“黑客工作”方法。在这种情况下，您首选的方法是什么？
@BrianC 您应该能够在逻辑上构建条件，以便通过四舍五入的分辨率值获得所需的结果，而无需依赖 *99px 或 *.1px 条件。