media query是css3规范中引入的，它提供了一种responsive design的基础机制：浏览器在不同size的设备中将以不同样式展现网页，这就给一个网页能够适应不同device一种可能。在实际使用中，我常常碰到以下问题：为什么media query的rule不起作用？很有可能和你的media query所处的位置有关，也很有可能和media query中的selector权重不
如外面的targeting到相同元素的css权重有关，比如：
@media screen and (max-width: 960px) {
p{
background-color:red;
}
}
p{
background-color: blue;
}
在上面的query代码中，我们希望在小于960px时，p应用一个red背景，但是由于后面有同样权重的p选择器定义了blue的背景，根据css的层叠特性，后面的(normal p rule)将覆盖前面的(media queried p rule)规则，所以即使在screen为小于960px时，仍然无法应用media query中的css定义。
解决方案和最佳实践
将media query block放到通用规则的后面
再比如，如果media query中定义的css rule权重太低，则同样不会被适用：
<html>
<head>
<title></title>
<style type="text/css">
p,.higher{
background-color: blue;
}
@media screen and (max-width: 960px) {
p{
background-color:red;
}
}
</style>
</head>
<body>
<p class="higher">testing p tag for css rule嵌套vs normal css</p>
</body>
</html>
上面的例子中，在media query中只用了一个p元素选择器，但是由于在html中，该p又有一个class相关联，而css定义中，也有对该class的定义。这样即使media query的条件满足了，但是由于权重太低，依然无法应用其规则!
解决方案和最佳实践
media query必须目标明确，真正选中要选的元素，和外部普通css选择器需要是完全一样的。最好在普通的css选择器规则之后，立即放对该选择器设定样式的media query规则
时间： 2024-10-06 10:07:37