为什么媒体查询的顺序在CSS中很重要？

Question 1

最近，我一直在设计响应速度更快的网站，并且经常使用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;}
}

如果我对媒体查询的理解是正确的，则顺序无关紧要，但看起来确实如此。可能是什么原因？

Question 2

那是CSS的设计-级联样式表。

这意味着，如果将两个冲突规则应用于同一元素，它将选择最后一个已声明的规则，除非第一个规则具有!important标记或更具体（例如，html > body与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像素）。

Question 3

或者，您可以将最小宽度添加到较大的媒体查询中，而无论顺序如何，都不会出现任何问题。

@media (min-width: 400.1px) and (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

展开摘要

使用此代码，以任何顺序，对于宽度为400.1px-600px的分辨率，背景颜色将始终为红色，对于宽度为400px或更小的分辨率，背景颜色将始终为蓝色。