媒体查询@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

posted @ 2020-07-04 10:44  小猿笔记  阅读(2296)  评论(0编辑  收藏  举报