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.…
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/