media query是css3规范中引入的，它提供了一种responsive design的基础机制：浏览器在不同size的设备中将以不同样式展现网页，这就给一个网页能够适应不同device一种可能。在实际使用中，我常常碰到以下问题：为什么media query的rule不起作用？很有可能和你的media query所处的位置有关，也很有可能和media query中的selector权重不
如外面的targeting到相同元素的css权重有关，比如：
@media screen and (max- 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- 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; }