CSS clamp() functie

Definitie en gebruik

CSS clamp() De functie wordt gebruikt om een waarde in te stellen die zich aanpast aan de grootte van het viewport tussen de minimale en maximale waarde.

clamp() De functie heeft drie parameters: minimale waarde, voorkeurswaarde en maximale waarde. Als de voorkeurswaarde binnen het gespecificeerde bereik ligt, kiest de browser de voorkeurswaarde; anders kiest de browser de minimale of maximale waarde.

Voorbeeld

Stel de minimale lettergrootte van het <h1>-element in op 2rem en de maximale lettergrootte op 3.5rem. Tevens stel de minimale lettergrootte van het <p>-element in op 1rem en de maximale lettergrootte op 2.5rem:

h1 {
  font-size: clamp(2rem, 2.5vw, 3.5rem);
}
p {
  font-size: clamp(1rem, 2.5vw, 2.5rem);
}

Probeer het zelf uit

CSS syntaxis

clamp(min, preferred, max)

Technische details

Browserondersteuning

Tafelnummers in de tabel geven de browserversie aan die de functie volledig ondersteunt.