Units

Summary

CSS sizing units — px (absolute), %, em/rem (relative to font size), vw/vh (viewport) — each suited to different responsive scenarios. Choosing units well makes interfaces more resilient to different font settings, viewport sizes, accessibility preferences, and content lengths.

• 1Rebuild a component using `rem` instead of `px` for scalable typography. Validate your understanding by applying it in a small practical example.
• 2Learn the difference between `em` (relative to parent) and `rem` (relative to root). Focus on understanding the underlying reason it works, not only memorizing the definition.
• 3Try `vw`/`vh` for full-viewport hero sections.