[CSS] CSS Media Queries Range Contexts

Browser support: https://caniuse.com/?search=%40media

 

Normally we write midea query like this:

@media (max-width: 750px) {
   div {
      color: red;
    }
}

It applies red color when the screen size is lower than 750px.

 

By using new approach:

@media (width <= 750px) {
   div {
      color: red;
   }
} 

 

Other example:

/* Old */
@media (min-width: 750px) {
      
}

/* New */
 @media (width >= 750px) {

 }

/* Old */
@media (min-width: 375px) and (max-width: 750px) {
      
} 

/* New */
 @media (375px <= width <= 750px) {

 }