What you will learn
- Choose between px, rem, percentages and viewport units
- Create fluid font sizes with clamp()
- Make images scale without overflowing or causing layout shifts
Fixed pixel sizes do not adapt well. The rem unit is relative to the root font size, which is 16 pixels by default, so 1.5rem is 24 pixels and respects a visitor's own browser font setting. Percentages size elements relative to their container, and viewport units such as vw are relative to the screen width. Setting max-width on text blocks keeps line lengths comfortable to read.
The clamp() function sets a value that scales between a minimum and a maximum. For example, font-size: clamp(1.75rem, 4vw, 3rem) makes a heading grow with the screen width but never smaller than 1.75rem or larger than 3rem. This removes the need for several media queries just to adjust heading sizes, and it works for spacing as well as type.
Images need care too. The rule img { max-width: 100%; height: auto; } stops images overflowing their container. Always set width and height attributes on <img> so the browser can reserve space before the file loads, which prevents content jumping around. The srcset attribute lets the browser pick a smaller file on small screens, and loading="lazy" delays images further down the page.