clamp()

Definition

Fonction CSS qui contraint une valeur entre un minimum et un maximum avec une valeur préférée fluide. clamp(min, preferred, max) remplace les combinaisons de min()/max().

Analogie

Comme un thermostat : la température varie librement entre une borne basse et une borne haute.

Exemple de code

h1 {
  /* De 1.5rem à 3rem, fluide entre */
  font-size: clamp(1.5rem, 4vw, 3rem);
}
.container {
  width: clamp(320px, 90%, 1200px);
}

Cas d'usage

Typographie fluide et largeurs adaptatives sans media queries ni calculs complexes.

Anti-pattern

Termes lies