结合最小宽度和最大宽度

Question

I want div1 to appear only when the window width is less than 800px, and I want div2 to appear only when the window width is greater than 800px. My solution is to use the following CSS which works. However, is there a way to do this using only one @media command? It seems clumsy to have to write two conditions, one for a max-width , and one for a 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

Take one of the set out of media queries.

 #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> 

Or

 #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

There is a way to combine media queries try:

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

The query above will trigger only for screens that are 600-400px wide. This can be used to target specific devices with known widths.

Or if you only want to target screen sizes that are 800px or less use:

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