Media Query

Adjusting the size of the rendered page via the meta viewport tag is only the first step of making your web pages responsive. The second step is to adjust the layout and appearance of the content, which is done through conditional styles. The CSS equivalent of an if statement is the media query, which has this general structure:

@media (CRITERIA) {
  /* rulesets to be applied when CRITERIA is met */
}

The rulesets within a media query are normal CSS rulesets consisting of a selector and property assignments. But they are only applied when the criteria of the query is met.

The criteria is expressed in terms of types and features. Types refer to the kind of media through which the content is being presented to the visitor. Four boolean type expressions are currently available:

• screen is true if the content is being displayed on an electronic device.
• print is true if the content is being sent to a printer.
• speech is true if the content is being spoken by a screen reader.
• all is true if the content is being presented by any medium.

Suppose you want to disable a background image, hide the navigation, and switch to black text on a white background when your page is printed. Then you would write this media query:

@media (print) {
  body {
    background-image: none;
    background-color: white;
    color: black;
  }

  nav {
    display: none;
  }
}

Features refer to characteristics of the hardware or preferences set by the visitor. These include the screen's resolution, aspect ratio, or orientation; the number of colors available; the desired contrast; the availability of a mouse; and many others.

Suppose you have an image gallery that scales up an image when it's hovered. To accommodate visitors who experience motion sickness from animations, you use this media query to disable the transformation:

img:hover {
  transform: scale(1.5);
}

@media (prefers-reduced-motion) {
  img:hover {
    transform: none;
  }
}

The order of these two rulesets is significant. The media query overrides the behavior set by the first ruleset. If you flipped their order, the ruleset would override the media query. This is a general rule: always establish the baseline behavior first, and override with the media queries later.

The types and features can combined into expressions of arbitrary complexity using logical operators, including and, not, and , (or).