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.
Already using clamp() or planning to?
Let me know!
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 ❤️