Relative CSS Units

Relative CSS Units — Master rem, em, vw, vh, %, ch, ex, and other relative units for flexible, responsive designs. The guide walks through Font-Relative Units, Viewport-Relative Units. `em` — relative to parent font-size. `rem` — relative to root (`html`) font-size. `ch` — width of "0" character — good for line length (max-width:60ch). `ex` — height of "x" character. Use rem for spacing and font sizes (consistent across page), em for component-relative sizing (buttons padding). `vw` — 1% of viewport width. `vh` — 1% of viewport height. `vmin` — smaller of vw/vh. `vmax` — larger of vw/vh. `svh` / `lvh` / `dvh` — small/large/dynamic viewport height (addresses mobile browser chrome issues). Use vw for full-width elements, vh for hero sections, dvh for 100% height on mobile. The guide is organized into 2 sections that build on each other, each pairing a prose explanation with real CSS you can use as-is.