結合最小寬度和最大寬度

Question

我希望div1僅在窗口寬度小於800px時出現，並且我希望div2僅在窗口寬度大於800px時出現。 我的解決方案是使用下面的CSS。 但是，有沒有辦法僅使用一個@media命令來執行此操作？ 必須寫兩個條件似乎很笨拙，一個條件為max-width ，一個條件為min-width 。

 @media screen and (max-width: 800px) { #div1 { display: block; } #div2 { display: none; } } @media screen and (min-width: 800px) { #div1 { display: none; } #div2 { display: block; } } 

 <div id="div1"> DIV1 </div> <div id="div2"> DIV2 </div> 

Answer 1

從媒體查詢中選擇其中之一。

 #div1 { display: none; } #div2 { display: block; } @media screen and (max-width: 800px) { #div1 { display: block; } #div2 { display: none; } } 

 <div id="div1"> DIV1 </div> <div id="div2"> DIV2 </div> 

要么

 #div1 { display: block; } #div2 { display: none; } @media screen and (min-width: 800px) { #div1 { display: none; } #div2 { display: block; } } 

 <div id="div1"> DIV1 </div> <div id="div2"> DIV2 </div> 

Answer 2

有一種組合媒體查詢的方法：

@media only screen and (max-width: 600px) and (min-width: 400px) {

上面的查詢僅會觸發600-400px寬的屏幕。 這可用於瞄准具有已知寬度的特定設備。

或者，如果您只想定位800像素或更小的屏幕尺寸，請使用：

@media screen and (max-width: 800px) {

Answer 3

replace @media screen and (max-width: 800px) { #div1 {
display: block;
}
#div2 {
display: none;
} }

with  #div1 {
display: block;
}
#div2 {
display: none;
}