媒体查询@media与css先后顺序产生的优先级问题【转】
缘起:我新到一个公司,接手一个以前的项目。在谷歌模拟器上调试苹果系列的效果,总是调节不好。
期间:困扰了我好大一会儿,不和常规呀,难道是鬼打墙了?
真相:@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里的样式怎么也不起作用。因为被后来的覆盖了。
来源:https://www.cnblogs.com/noseebye/p/5724587.html