[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) {
}