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

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

下面是一个例子：

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

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

来源

2012-01-09 dsignr

这是CSS设计 - 层叠样式表。

这意味着，如果你申请的是碰撞到同一个元素的两个规则，它会选择被宣布为最后一个，除非第一个具有!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个像素宽窗口）。

来源

2012-01-09 16:58:46

谢谢。我从来没有想到，这样一个简单的逻辑会一起毁了我的睡眠。谢谢。 – dsignr 2012-01-09 18:30:34

如果在没有任何媒体查询的情况下应用相同的规则，然后在小屏幕移动设备的媒体查询中应用相同的规则，并且有一些图像需要下载，则在样式表中。那么会发生什么事情呢，浏览器会在没有媒体查询的情况下忽略规则，并只应用特定的媒体查询规则？ – 2017-03-11 18:41:18

或者您可以将最小宽度添加到更大的媒体查询中，并且不会有任何问题，而不管顺序如何。

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

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

使用该代码，以任何顺序，所述背景颜色将总是红色与400.1px-600px的宽度的分辨率，并且将始终是蓝色用于与宽度分辨率400px或更少。

来源

2014-11-06 15:58:26

不错！谢谢。 – dsignr 2015-09-14 04:28:19

我在CSS中看到了像400.1px这样的值。或1023像素，1025像素等 – Monstieur 2018-01-17 11:49:46

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

回答

相关问题