媒体查询是否覆盖非媒体查询？

Question

如果我使用以下代码，是否需要显式指定450px以上的媒体查询？

//target above 450px
.classA {color:#fff;}
#elementB {display:block;}

//target 450px and below
@media (max-width:450px){
.classA {color:#000;}
#elementB {display:none;}
}

这被认为是好的实践吗？

Answer 1

首先回答你的第一个问题:不，你不必专门指定一个媒体查询来作为above 450px的目标。按照你现在设置的方式，它将在每个宽度上使用媒体查询之外的任何内容，并且只有在宽度为450px或更低的情况下才使用媒体查询内的内容，这很好，因为这看起来就是您想要的结果。

回答你的第二个问题，我自己并没有太多地使用媒体查询，所以不要把我的话当做“良好实践”的福音，而是看看你的CSS片段。我认为它目前运行良好的唯一原因是因为您将媒体查询和其中的类定位在样式表中的“常规类”的之后。如果你改变这种情况(将“常规类”定位在媒体查询中的类之后)，我相信你的“常规类”将总是覆盖媒体查询，除非你把它们放在他们自己的媒体查询中，只针对above 450px宽度。