为什么媒体查询的顺序在 CSS 中很重要？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8790321/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does the order of media queries matter in CSS?
提问by dsignr
Of late, I've been designing sites that are more responsive and I've been using CSS media queries frequently. One pattern I noticed is that the order in which the media queries are defined actually matters. I didn't test it in every single browser, but just on Chrome. Is there an explanation for this behaviour? Sometimes it gets frustrating when your site doesn't work as it should and you are unsure if it's the query or the order in which the query is written.
最近，我一直在设计响应速度更快的网站，并且经常使用 CSS 媒体查询。我注意到的一种模式是媒体查询的定义顺序实际上很重要。我没有在每个浏览器中测试它，而是在 Chrome 上测试。这种行为有解释吗？有时，当您的网站无法正常工作并且您不确定是查询还是查询的编写顺序时，它会令人沮丧。
Here's an example:
下面是一个例子：
HTML
HTML
<body>
<div class="one"><h1>Welcome to my website</h1></div>
<div class="two"><a href="#">Contact us</a></div>
</body>
CSS:
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;}
}
However, If I wrote the query for 1024x600 in the last, the browser would ignore it and apply the margin value specified in the starting of the CSS (margin-top:2em).
但是，如果我在最后编写了 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;}
}
If my understanding of media queries are correct, the order shouldn't matter, but it seems it does. What could be the reason?
如果我对媒体查询的理解是正确的，那么顺序应该无关紧要，但似乎确实如此。可能是什么原因？
回答by Alessandro Vendruscolo
That's by design of CSS — Cascading Style Sheet.
这是由 CSS 设计的——层叠样式表。
It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !importantmarker or is more specific (e.g. html > bodyvs just body, the latter is less specific).
这意味着，如果您将两个规则应用于相同的元素，它将选择最后一个声明的规则，除非第一个具有!important标记或更具体（例如html > bodyvs just body，后者不太具体）。
So, given this CSS
所以，鉴于这个 CSS
@media (max-width: 600px) {
body {
background: red;
}
}
@media (max-width: 400px) {
body {
background: blue;
}
}
if the browser window is 350 pixels wide, the background will be blue, while with this CSS
如果浏览器窗口宽度为 350 像素，背景将为蓝色，而使用此 CSS
@media (max-width: 400px) {
body {
background: blue;
}
}
@media (max-width: 600px) {
body {
background: red;
}
}
and the same window width, the background will be red. Both rules are indeed matched, but the second one it's the one that is applied because is the last rule.
和相同的窗口宽度，背景将是红色的。两条规则确实匹配，但第二条规则是应用的，因为是最后一条规则。
Finally, with
最后，与
@media (max-width: 400px) {
body {
background: blue !important;
}
}
@media (max-width: 600px) {
body {
background: red;
}
}
or
或者
@media (max-width: 400px) {
html > body {
background: blue;
}
}
@media (max-width: 600px) {
body {
background: red;
}
}
the background will be blue (with a 350 pixels wide window).
背景将为蓝色（具有 350 像素宽的窗口）。
回答by Liran H
Or you could just add min-width to the bigger media query/ies and not have any issues, regardless of the order.
或者您可以将 min-width 添加到更大的媒体查询/ ies 并且没有任何问题，无论顺序如何。
@media (min-width: 400.1px) and (max-width: 600px) {
body {
background: red;
}
}
@media (max-width: 400px) {
body {
background: blue;
}
}Using this code, in any order, the background-color will always be red for resolutions with a width of 400.1px-600px, and will always be blue for resolutions with a width of 400px or less.
使用此代码，以任何顺序，对于宽度为 400.1px-600px 的分辨率，背景颜色将始终为红色，对于宽度为 400px 或更小的分辨率，背景颜色将始终为蓝色。
