结合最小宽度和最大宽度

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; 
}