css媒体查询改变上边距,为什么媒体查询的顺序在CSS中很重要？

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

最近，我一直在设计响应更快的网站，而且我经常使用CSS媒体查询。我注意到的一种模式是定义媒体查询的顺序实际上很重要。我没有在每个浏览器中测试它，只是在Chrome上测试。这种行为有解释吗？有时，当您的网站无法正常工作时会感到沮丧，并且您不确定它是查询还是查询的编写顺序。

这是一个例子：

HTML

Welcome to my website

Contact us

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;}}

如果我对媒体查询的理解是正确的，那么顺序应该无关紧要，但似乎确实如此。可能是什么原因？