Responsive CSS with min(), max(), and clamp()

Stuck in a thicket of media queries? Modern CSS gives you min(), max(), and clamp() for fluid sizing that responds to the viewport with less boilerplate.

The trio

• min(a, b) — use the smaller value
• max(a, b) — use the larger value
• clamp(min, preferred, max) — prefer a fluid value, but never go below or above the bounds

A common pattern for type:

font-size: clamp(1rem, 2.5vw, 2rem);

That scales with the viewport while respecting readable minimums and maximums.

When to use them

Reach for these functions when you want smooth scaling. Keep media queries for layout shifts that truly need breakpoints — not every font-size nudge.

This was part 1 of a CSS tips series: small tools, big leverage for responsive design.