Responsive Design

CSS Units

Unit	Relative to	Use for
`px`	Fixed pixels	Borders, shadows
`%`	The parent's size	Widths
`rem`	The root font size (usually 16px)	Font sizes, spacing
`em`	The element's own font size	Padding that scales with text
`vw` / `vh`	1% of the screen width / height	Full-screen sections
`dvh`	1% of the visible screen height on mobile	Full-height layouts on phones
`fr`	A fraction of free space in a grid	Grid columns
`ch`	The width of the "0" character	Readable text width

html { font-size: 100%; }  /* 16px */
h1 { font-size: 2.5rem; }  /* 40px */
.hero { min-height: 80vh; }
article { max-width: 65ch; }

Fluid sizes with clamp()

h1 { font-size: clamp(2rem, 5vw, 4rem); }

The heading grows with the screen but never goes below 2rem or above 4rem.