最近，我一直在设计更灵敏的网站，我经常使用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;}
}
但是，如果我最后写入1024×600的查询，浏览器将忽略它，并应用CSS开头指定的margin值(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 vs just 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像素宽的窗口)。