Use only relative sizes (rem, em, %, etc.) for media query breakpoints

To define media query breakpoints, it is advisable to use relative units only (such as rem, em ou %) for the CSS @media rule.

@media (max-width: 25rem) {
  nav li.tile {
    width: 33%;
  }
}

Rather than absolute units such as px, pt, cm, etc.

Note

This recommendation also applies for media queries directly integrated in the <link /> tag:

<link rel="stylesheet" href="/css/extra-small.css" media="all and (max-width: 25rem)" />

Comments

Back to top