为什么媒体查询的顺序在CSS中很重要？
最近，我一直在devise更具响应性的网站，我经常使用CSS媒体查询。 我注意到的一种模式是，媒体查询的定义顺序实际上很重要。 我没有在每个浏览器中进行testing，只是在Chrome上进行testing。 有没有解释这种行为？ 有时，当您的网站不能正常工作时，您会感到沮丧，并且您不确定是查询还是查询的写入顺序。
这是一个例子：
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-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;} }
如果我对媒体查询的理解是正确的，那么顺序应该不重要，但看起来确实如此。 可能是什么原因？
这是由CSSdevise – 层叠样式表。
这意味着，如果你应用两个碰撞到相同元素的规则，它会select最后一个声明的，除非第一个具有!important标记或更具体（例如html > body vs 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像素宽的窗口）。
或者，您可以将最小宽度添加到更大的媒体查询，而不会有任何问题，而不pipe顺序如何。
@media (min-width: 400.1px) and (max-width: 600px) { body { background: red; } } @media (max-width: 400px) { body { background: blue; } }
