最近，我一直在设计响应速度更快的网站，并且经常使用 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 的设计——级联样式表。
这意味着，如果您将两个规则应用于相同的元素，它将选择最后一个声明的规则，除非第一个具有 !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 像素宽的窗口)。
关于css - 为什么媒体查询的顺序在 CSS 中很重要？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8790321/