How to choose CSS units
Use pixels selectively
A CSS pixel is a visual reference unit, not necessarily one hardware pixel. It is useful for thin borders and exact minimum details.
.divider { border-width: 1px; }Use rem for scalable sizing
rem is relative to the root font size; em is relative to the current element's font size for most properties.
body { font-size: 1rem; }
h1 { font-size: 2.25rem; }
button { padding: 0.6em 1em; }Use fluid measurements
Percentages depend on a containing value. Viewport units depend on the viewport; modern dynamic units help account for mobile browser controls.
.hero {
min-height: 60dvh;
width: 100%;
}Combine limits and fluidity
Functions can keep fluid values within readable bounds.
.page { width: min(70rem, 100% - 2rem); }
h1 { font-size: clamp(2rem, 5vw, 4rem); }