clamp()
The clamp() function returns a value bounded between a minimum and maximum, ideal for fluid sizing.
Syntax
clamp(<min>, <preferred>, <max>)Examples
h1 {
font-size: clamp(1.75rem, 1rem + 4vw, 3.5rem);
}
.container { width: clamp(20rem, 90vw, 70rem); }
Output
The heading scales fluidly with the viewport but never below 1.75rem or above 3.5rem.
Notes
Equivalent to max(min, min(preferred, max)). The classic tool for fluid typography and responsive widths without media queries. Include a rem term in the preferred value so text still scales with user zoom.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 79 |
| firefox | 75 |
| safari | 13.1 |
| edge | 79 |