缘起：我新到⼀个公司，接⼿⼀个以前的项⽬。在⾕歌模拟器上调试苹果系列的效果，总是调节不好。期间：困扰了我好⼤⼀会⼉，不和常规呀，难道是⿁打墙了？
真相：@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⾥的样式怎么也不起作⽤。因为被后来的覆盖了。来源：
因篇幅问题不能全部显示，请点此查看更多更全内容