Media Queries made easy

Not another article that explains min-width max-width in CSS

But instead we can officially rejoice in the fact that we don't need to use this anymore.. Amazing, so what's the new way?

With 89.74% support it's safe to say that this is a good a time as any to bring in the new Range Syntax for Media Queries.

What is this Range Syntax?

This is the beauty of it, want to add styles where the screen is 700px or more?

@media (width >= 700px) {
add your CSS here
}

Want to add styles where the screen width is less than 700px (699px or less)?

@media (width < 700px) {
add your CSS here
}

or

@media (width <= 699px) {
add your CSS here
}

Want to apply a style where the screen is between 320px and 500px?

@media (320px <= width <= 500px) {
add your CSS here
}

Amazing right? No more having to use the below hack to find out if you picked the correct width.

@media (min-width: 700px) {
  body {
    background-color: red;
  }
}

And the best part is that this isn't limited to media queries. Want to use it on @container? Go right ahead and use it on container queries too!

I know everyone has struggled with this at some point in their journey, and now it is officially over!

More information can be found at Can I Use - Media Range Syntax