Media Query Screen Range With Operators - Short And Easy

Amarendra Sharma — Wed, 22 Feb 2023 22:07:34 +0000

In order to write a media query, we use the @media rule, followed by a media type and a set of features that describe the conditions under which the styles will be applied.

The media type can be either screen or print, and the features can include things like screen width, orientation, resolution, and more.

For example, if we wanted to target devices with a screen width between 420px and 720px, we can use the following media query:

@media (min-width: 420px) and (max-width: 720px) {
  /* Styles for devices with a screen width between 420px and 720px */
}

Alternatively, we can use comparison operators to achieve the same result

@media (420px <= width <= 720px) {
    /* Styles for devices with a screen width between 420px and 720px */
  }

DEV Community: Amarendra Sharma

Media Query Screen Range With Operators - Short And Easy