Fluid values with clamp()

The clamp(min, preferred, max) function computes a value that follows a preferred value, often fluid in vw, while staying between a minimum and a maximum. It is used for text sizes and spacing that adapt gradually to the screen, without piling up media queries.

Example

h1 { font-size: clamp(1.5rem, 4vw, 3rem); }

Related concepts

The whole glossary