A relative CSS value sizes something against a reference instead of fixing it to an absolute measure such as pixels. That reference might be a font size or a viewport dimension. The browser resolves the declared value to a computed value; change the reference, and the computed size can change too. This makes relative units useful when a page must accommodate different text settings or screen sizes. section 2.0 section 2.2 section 2.7
Choose the reference that matches what should scale:
- Use em when a measurement should follow an element’s font size. For padding, 1em equals that element’s font size: at 16px, it computes to 16px. An em used for font-size instead refers to the inherited font size. section 2.2 section 2.7
- Use rem when the root element’s font size should be the shared reference. A 0.8rem list font computes to 12.8px with a 16px root and stays the same through nested lists. section 2.2.2
- Use a viewport-relative unit when the intended reference is the viewport’s width or height. section 2.7
Scale a component without rewriting its spacing
Give a box 1em of padding and a 1em border radius. Set one box’s font size to 12px and another’s to 18px: both measurements grow with their respective boxes. For page-wide scaling, set the root font size to 0.85em, then change it to 1em at a viewport width of 800px and 1.15em at 1200px. Components sized with ems and rems respond without each needing its own media query. section 2.2 section 2.3.2
Listing 2.12 Responsive base font-size
:root { #1
font-size: 0.85em; #1
} #1
@media (min-width: 800px) { #2
:root { #2
font-size: 1em; #2
} #2
} #2
@media (min-width: 1200px) { #3
:root { #3
font-size: 1.15em; #3
} #3
} #3
The root-font-size rules show how two media queries can change the reference used by relative measurements across a page. section 2.3.2
Relative is not automatically better than absolute. Rems are a practical default for predictable font sizes; ems suit small spaces around text and buttons that should grow with the text. Pixels can suit fine borders or larger gaps that need not scale. For example, a 10px navigation gap against a 16px base converts to 0.625em, while larger page gaps can remain in pixels. Avoid shrinking the root to 10px merely to make rem arithmetic easy: it creates extra font-size overrides and keeps the design anchored to pixel calculations. Choose the unit by the behavior you want, then check the rendered result. section 2.2.2 section 12.1.1 section 2.3
