CSS media query应用中的层叠特性使用最佳实践

来源：互联网发布：探索者结构设计软件编辑：程序博客网时间：2024/05/19 12:36

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规则

这个原因就是所谓层叠特性，当css被优先级权重完全一样的选择器选中时，则后面的会覆盖前面的@！！

//注意：在html中的class摆列顺序由于其优先级完全一样，所以顺序没有关系，有关系的是其在css定义中出现的顺序，后面的将覆盖前面的rule，初学者容易搞混淆<p class="specialred modifyblue">优先级层叠演示</p> .modifyblue{  color: blue;}.specialred{  color: red;}

阅读全文

0 0