为什么媒体查询的顺序在CSS中很重要？
为什么媒体查询的顺序在CSS中很重要？
提问于 2012-01-09 22:56:37
最近，我一直在设计更具响应性的网站，我也经常使用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开头指定的边距值( wrote 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;}
}如果我对媒体查询的理解是正确的，那么顺序应该不重要，但看起来很重要。可能的原因是什么？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8790321
复制相关文章
相似问题
腾讯云开发者
