媒體查詢是否覆蓋非媒體查詢？

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。