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

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宽度。