media queries range syntax

April 26, 2023

Here’s a great way to use your @media queries without thinking of what kind of break-point to set in your min-widht or max-width.

@media ( widht > 600px ) {
	/* the rest of your styles */
}

@media ( width < 500px ) {
	/* the rest of your styles */
}

Yep that’s right we can now use < > these symbols ( comparison symbols ) to set our site responsiveness.

Targeting multiple ranges?

@media ( 400px <= width <= 1000px ) {
	/* rest of your styles */
}

👌This explains it better. https://css-tricks.com/the-new-css-media-query-range-syntax/