media query ranges - the width keyword

The width keyword in CSS media query allows us to replace the min and max values in our responsive syntax and take a more programming approach using “<” or “>”. Let’s take a look at this code.

@media screen and (max-width: 300x) {
.container {
    padding: 1rem;
  }
}

@media screen and (min-width: 300px) and (max-width: 600px) {
.container {
    padding: 2rem;
  }
}

@media screen and (min-width: 600px) {
.container {
    padding: 2rem;
  }
}

We can easily replace above code using the keyword width.

/* apply styles when width is less than 300px */
@media screen and (width < 300x) {
.container {
    padding: 1rem;
  }
}

/* apply styles when width is greater or equal 300px and less than 600px */
@media screen and (width >= 300px) and (width < 600px) {
.container {
    padding: 2rem;
  }
}

/* apply styles when width is greater or equal 600px */
@media screen and (width >= 600px) {
.container {
    padding: 2rem;
  }
}

Summary

The width keyword in media queries gives us a much nicer, faster, and easier way to apply responsive styles.

media query ranges – the width keyword

Summary