最近，我一直在设计响应速度更快的网站，并且经常使用 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 设计的——层叠样式表。
这意味着，如果您应用两个与相同元素发生冲突的规则，它将选择声明的最后一个规则，除非第一个规则具有
!importanthtml > bodybody） 所以，有了这个 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 像素宽的窗口）。
或者您可以将最小宽度添加到更大的媒体查询中，而不管顺序如何，都不会出现任何问题。
@media (min-width: 400.1px) and (max-width: 600px) {
body {
background: red;
}
}
@media (max-width: 400px) {
body {
background: blue;
}
}以任何顺序使用此代码，对于宽度为 400.1px-600px 的分辨率，背景颜色将始终为红色，对于宽度为 400px 或更小的分辨率，背景颜色将始终为蓝色。
<body>
<div id="div1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo similique minus facere error sunt tenetur deleniti debitis esse animi dolores repudiandae assumenda incidunt ipsa odio sapiente, omnis expedita aliquam sequi, cum reprehenderit? Asperiores aut officia dolorem voluptatem natus ipsum voluptates fuga odio qui velit et fugit consectetur esse obcaecati id, repudiandae alias delectus eveniet assumenda. Facere ex ea rem assumenda, in sequi animi quibusdam necessitatibus, totam error sed officia vel at maxime voluptate nam ipsam, provident aperiam nobis minus voluptates inventore? Voluptates minima debitis, qui architecto eius natus minus consectetur blanditiis unde suscipit tempore, nulla, fugit magni molestias odio doloribus!</p>
</div>
</body>或者您可以按照不同的顺序编写，即先编写较大的媒体查询，然后编写较小的媒体查询。
@media screen and (max-width: 900px) { /* CSS runs from top to bottom */
#div1{
background-color: red;
}
}
@media screen and (max-width: 600px) {
#div1{
background-color: blue;
}
}现在，当您逐渐减小屏幕尺寸时，即如果屏幕尺寸为 601px（大于 600px 但小于 900px），那么在这种情况下背景颜色将为“红色”。 同样，如果屏幕尺寸为 599 像素（小于 600 像素和 900 像素），则将应用后一个，即背景变为“蓝色”。 因此，当您从上到下逐渐减小屏幕尺寸时，它会检查每个条件。
应用最大宽度时，应先添加较高的像素，然后应添加较低的像素
我可能很蠢，但为什么不呢：
@media (max-width: 399px) {
body {
background: blue;
}
}
@media (min-width: 400px) and (max-width: 600px) {
body {
background: red;
}
}