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)" />