Media queries still work.
But they’re not always the best tool when it comes to small layout changes.
I ran into this while building a popup that needed to shrink smoothly between 750px and 950px. I added three media queries. It felt clunky.
That’s when I gave clamp() another look.
Turns out, clamp() lets you describe responsive behavior in one line. It’s supported by 96% of browsers and works for any CSS property that accepts a unit (font, spacing, etc.)
The syntax looks like this:
font-size: clamp(16px, 2vw, 32px);
or if you're using rem
font-size: clamp(1rem, 2vw, 2rem);
This means:
- Never go below 16px
- Never exceed 32px
- In between, scale based on viewport width
It’s simple, except tuning the values feels awkward. The “preferred” value must be a fluid unit like vw or vmin, and the curve is linear between min and max.
There are many small tools, I personally like this one to preview and fine-tune clamp expressions: https://design.dev/tools/clamp-generator/