結合最小寬度和最大寬度

Question

我想要div1僅在窗口寬度小於800像素時出現，並且我希望div2僅在窗口寬度大於800像素時出現。我的解決方案是使用下面的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; 
}