CSS clamp() funktion

Definition och användning

CSS clamp() Funktionen används för att ställa in ett värde som anpassar sig dynamiskt mellan minsta och maximalt värde baserat på viewport-storleken.

clamp() Funktionen har tre parametrar: minsta värde, föredraget värde och maximalt värde. Om föredraget värde ligger inom det specificerade intervallet väljer webbläsaren föredraget värde; annars väljer webbläsaren minsta eller maximalt värde.

Exempel

Ställ in den minsta teckenstorleken för <h1>-elementet till 2rem och den största teckenstorleken till 3.5rem. Samtidigt ställ in den minsta teckenstorleken för <p>-elementet till 1rem och den största teckenstorleken till 2.5rem:

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

Prova själv

CSS-syntax

clamp(min, preferred, max)

Tekniska detaljer

Webbläsarstöd

Tabellens siffror representerar den första webbläsaren som fullständigt stöder denna funktion.