New Syntax to Set Width Ranges for Your CSS Media Queries

New syntax for range media queries

Photo by KOBU Agency on Unsplash
@media screen and (min-width: 400px) {  // Screen width should be greater than 400px or equal to 400px}@media screen and (max-width: 400px) {// Screen width should be less than 400px or equal to 400px}

< width and < = width

@media (max-width: 300px) {
// Viewports sizes with a width of 300px or less.
}
@media (width < 300px) {
// Viewports sizes with a width less than 300px.
}
@media (width <= 300px) {
// Viewports sizes with a width of 300px or less.
}

> width and > = width

@media (min-width: 400px) {
// Viewports sizes with a width of 400 pixels or greater.
}
@media (width > 400px) {
// Viewports sizes with a width greater than 400px.
}
@media (width >= 400px) {
// Viewports sizes with a width of 400 pixels or greater.
}

Combining Multiple Size Ranges

@media (min-width: 600px) and (max-width: 800px)  {
// Viewports sizes between 600px and 800px.
}
@media (width <= 600px) and (width <= 800px) {
// Viewports sizes between 600px and 800px.
}

Better way for combining multiple media query ranges.

@media (min-width: 600px) and (max-width: 800px) {
// Viewports sizes between 600px and 800px.
}
@media (600px <= width <= 800px ) {
// Viewports sizes between 600px and 800px.
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store