为什么媒体查询的顺序在 CSS 中很重要? [英] Why does the order of media queries matter in CSS?
问题描述
最近，我一直在设计响应速度更快的网站，并且经常使用 CSS 媒体查询.我注意到的一种模式是媒体查询的定义顺序实际上很重要.我没有在每个浏览器中测试它，而是在 Chrome 上测试.这种行为有解释吗?有时，当您的网站无法正常工作并且您不确定是查询还是查询的编写顺序时，您会感到沮丧.
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.
这是一个例子:
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).
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).
/* 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?
推荐答案
这是 CSS 的设计 - 层叠样式表.
That's by design of CSS — Cascading Style Sheet.
这意味着，如果您将两个规则应用于相同的元素，它将选择最后一个声明的规则，除非第一个具有 !important 标记或更具体(例如 html > body 与 body，后者不太具体).
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 !important marker or is more specific (e.g. html > body vs just body, the latter is less specific).
所以，给定这个 CSS
So, given this CSS
@media (max-width: 600px) {
body {
background: red;
}
}
@media (max-width: 400px) {
body {
background: blue;
}
}
如果浏览器窗口宽度为 350 像素，背景将为蓝色，而使用此 CSS 时
if the browser window is 350 pixels wide, the background will be blue, while with this 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.
最后，与
@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 像素宽的窗口).
the background will be blue (with a 350 pixels wide window).
这篇关于为什么媒体查询的顺序在 CSS 中很重要?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
