缘起：我新到一个公司，接手一个以前的项目。在谷歌模拟器上调试苹果系列的效果，总是调节不好。
期间：困扰了我好大一会儿，不和常规呀，难道是鬼打墙了？
真相：@media screen and (max-width: 800px) {}的样式应该放到后面，不应该放到没有@media的前面。
原因：很简单。@media是对条件才查询，但是它也遵守css的优先级顺序。
@media screen and (max-width: 800px) {
p {
background-color:lightblue;
font-size: 24px;
}
}
p {
background-color:lightgreen;
font-size: 48px;
}
这样的样式，即使满足了，查询条件，标签p里的文字还是48px。后面的样式会覆盖之前的。
所以正确的写法应该是：
p {
background-color:lightgreen;
font-size: 48px;
}
@media screen and (max-width: 800px) {
p {
background-color:lightblue;
font-size: 24px;
}
}
在回到项目中，由于之前的人，把@media写在了上面，所以导致@media里的样式怎么也不起作用。因为被后来的覆盖了。
原文：http://www.cnblogs.com/noseebye/p/5724587.html