猿问

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

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

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

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


陪伴而非守候
浏览 889回答 2
2回答

慕村225694

那就是CSS的设计 - 层叠样式表。这意味着，如果你应用两个碰撞到相同元素的规则，它将选择最后一个被声明的规则，除非第一个具有!important标记或更具体（例如html > bodyvs just&nbsp;body，后者不太具体）。所以，鉴于这个CSS@media&nbsp;(max-width:&nbsp;600px)&nbsp;{ &nbsp;&nbsp;body&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;red; &nbsp;&nbsp;}}@media&nbsp;(max-width:&nbsp;400px)&nbsp;{ &nbsp;&nbsp;body&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;blue; &nbsp;&nbsp;}}如果浏览器窗口宽度为350像素，则背景将为蓝色，而使用此CSS@media&nbsp;(max-width:&nbsp;400px)&nbsp;{ &nbsp;&nbsp;body&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;blue; &nbsp;&nbsp;}}@media&nbsp;(max-width:&nbsp;600px)&nbsp;{ &nbsp;&nbsp;body&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;red; &nbsp;&nbsp;}}和窗口宽度相同，背景为红色。两个规则确实匹配，但第二个规则是应用的规则，因为它是最后一条规则。最后，用@media&nbsp;(max-width:&nbsp;400px)&nbsp;{ &nbsp;&nbsp;body&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;blue&nbsp;!important; &nbsp;&nbsp;}}@media&nbsp;(max-width:&nbsp;600px)&nbsp;{ &nbsp;&nbsp;body&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;red; &nbsp;&nbsp;}}要么@media&nbsp;(max-width:&nbsp;400px)&nbsp;{ &nbsp;&nbsp;html&nbsp;>&nbsp;body&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;blue; &nbsp;&nbsp;}}@media&nbsp;(max-width:&nbsp;600px)&nbsp;{ &nbsp;&nbsp;body&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;red; &nbsp;&nbsp;}}背景将为蓝色（具有350像素宽的窗口）。
0

杨魅力

或者您可以将min-width添加到更大的媒体查询中，并且不管顺序如何都没有任何问题。@media&nbsp;(min-width:&nbsp;400.1px)&nbsp;and&nbsp;(max-width:&nbsp;600px)&nbsp;{ &nbsp;&nbsp;body&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;red; &nbsp;&nbsp;}}@media&nbsp;(max-width:&nbsp;400px)&nbsp;{ &nbsp;&nbsp;body&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;blue; &nbsp;&nbsp;}}使用此代码，无论如何，对于宽度为400.1px-600px的分辨率，背景颜色将始终为红色，对于宽度为400px或更小的分辨率，背景颜色将始终为蓝色。
0
随时随地看视频慕课网APP

相关问题

为什么字体颜色在Eclipse上没有变化 2 回答

相关分类

CSS3
Html/CSS
为什么字体颜色在Eclipse上没有变化 2 回答
我要回答