clamp()
Keeps a value within limits: the preferred value, but not less than the minimum and not more than the maximum.
Syntax
clamp(min, preferred, max)Parameters
| Parameter | Type | Description |
|---|---|---|
| min | length | The lower limit. |
| preferred | length | The desired value, usually relative: `5vw`. |
| max | length | The upper limit. |
Examples
Fluid font size:
<h2 style="font-size: clamp(1.25rem, 5vw, 2.5rem);">Resize the window — the heading scales, but within limits</h2>Fluid width:
<div style="width: clamp(150px, 50%, 400px); padding: 8px; background: palegreen;">Between 150 and 400 pixels wide</div>Notes
clamp() replaces several media queries for font sizes and spacing. Add rem to the preferred value (2vw + 1rem) so the text still grows when the user zooms in.
See also
- min() — Takes the smallest of the values — a way to set an upper limit.
- max() — Takes the largest of the values — a way to set a lower limit.
- font-size — The size of the font.
- px, em, rem, %, vw, vh — Units for lengths in CSS: absolute pixels and relative units.
Related recipes
In the tutorial
- CSS functions — Calculations right in CSS — calc(), min(), max() and clamp(), mixing units, fluid sizes and functions together with variables.