Absolute vs. Relative Units
CSS units fall into two categories. Absolute units (px, pt, cm, mm, in) have fixed physical sizes. Relative units (rem, em, %, vw, vh) scale based on context such as font size or viewport dimensions. Relative units are essential for responsive web design because they adapt to different screens and user settings.
Understanding rem and em
rem references the root element's font size; if html has font-size: 16px, then 1rem equals 16px everywhere. em references the current element's parent font size, which means nested em values compound. Most modern frameworks prefer rem for consistency and predictability across deeply nested components.
Viewport Units: vw and vh
1vw equals 1% of the viewport width; 1vh equals 1% of the viewport height. These units are powerful for full-screen layouts, responsive typography, and spacing that scales with the browser window. Be cautious on mobile where the address bar can affect the viewport height.
When to Use Physical Units
Physical units like pt, cm, mm, and in are intended for print media. Points (pt) are standard in print typography where 72pt equals one inch. Use physical units in @media print stylesheets; avoid them for screen layouts because screen DPI varies across devices.
