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

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及以下），这很好，因为它看起来很好这就是你追求的结果。

回答你的第二个问题，我自己并没有真正使用媒体查询，所以不要采取我所说的＃34;好的做法＆＃34;福音，但看着你的CSS片段。我认为它目前工作正常的唯一原因是因为你定位了媒体查询及其中的类 ＆＃34;常规类＆＃34;在样式表中。如果你转过身来（定位＆＃34;常规课程＆＃34;在媒体查询中的课程之后），我相信你的常规课程＆＃34;将 始终 覆盖媒体查询，除非您将其置于仅定位above 450px宽度的自己的媒体查询中。