Media queries aren’t the only solution for responsive design.
With clamp(), you can reduce their use significantly!
But wait, what is clamp()?
Clamp is a native css function that allow you to specify:
- a minimum value
- a preferred value (usually with % or viewport units)
- a maximum value
Its syntax looks like this: clamp(5em, 30%, 10em)
In short, it makes elements scale smoothly without relying on media queries.
Clamp is often used for padding, margins, width and font-size.
But it can handle anything with numerical values, such as:
aspect-ratio, gap, positioning, …
With ~95.2% browser support, it’s safe to use.
To learn more tips about CSS, make sure to join my newsletter below ❤️