Generator clamp() pentru font responsive

Exemple de valori clamp()

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

.element {
  font-size: clamp(2rem, 1.3785rem + 2.6519vw, 3.5rem);
}

.element {
  font-size: clamp(1.5rem, 1.0856rem + 1.768vw, 2.5rem);
}

.element {
  font-size: clamp(1rem, 0.9482rem + 0.221vw, 1.125rem);
}

.element {
  font-size: clamp(0.875rem, 0.8232rem + 0.221vw, 1rem);
}

.element {
  padding: clamp(1.5rem, -0.3646rem + 7.9558vw, 6rem);
}

.element {
  gap: clamp(0.75rem, 0.232rem + 2.2099vw, 2rem);
}

Cum folosești generatorul de clamp()

1. Scrie mărimea minimă și mărimea maximă, în px.
2. Scrie lățimea minimă și lățimea maximă a ecranului între care valoarea crește, de exemplu 320 și 1280 px.
3. Alege unitatea (rem sau px) și proprietatea: font-size, padding, gap, margin și altele.
4. Mută glisorul care simulează lățimea ecranului ca să vezi ce valoare rezultă, apoi copiază linia de CSS.

Cum funcționează clamp()

clamp(minim, preferat, maxim) folosește valoarea preferată, dar nu coboară sub minim și nu urcă peste maxim. Valoarea preferată combină o mărime fixă cu una proporțională cu lățimea ecranului (vw), deci crește liniar între cele două lățimi.

h1 {
  font-size: clamp(1rem, 0.6667rem + 1.6667vw, 2rem);
}

Exemplul de mai sus dă 16px pe un ecran de 320px și 32px pe unul de 1280px.

Formula

Panta este creșterea mărimii împărțită la creșterea lățimii ecranului. Înmulțită cu 100, devine valoarea în vw. Termenul fix (intercept) este ce rămâne din mărimea minimă după ce scazi partea dată de vw la lățimea minimă:

panta     = (max - min) / (ecranMax - ecranMin)   = (32 - 16) / (1280 - 320) = 0.016667
vw        = panta * 100                            = 1.6667vw
intercept = min - panta * ecranMin                 = 16 - 0.016667 * 320 = 10.667px = 0.6667rem

Conversia în rem presupune 1rem = 16px, mărimea implicită din browsere.

De ce rem și nu px

Unitatea vw nu crește când utilizatorul mărește textul din setările browserului. Dacă minimul, maximul și termenul fix sunt în rem, o parte din mărime urmează setarea utilizatorului, iar textul poate fi mărit în continuare. Asta ajută la criteriul WCAG 1.4.4 (redimensionarea textului până la 200%). Evită intervalele foarte largi, în care aproape toată mărimea vine din vw.

clamp() este suportat de toate browserele moderne din 2020 încoace. Mai multe despre unități găsești în secțiunea Învață CSS.

Întrebări frecvente

Pot folosi clamp() pentru spațieri?

Da. Funcționează cu orice proprietate care primește o lungime: padding, margin, gap, width, border-radius.

Ce se întâmplă sub lățimea minimă sau peste cea maximă?

Valoarea rămâne fixă la minim, respectiv la maxim. Textul nu mai scade și nu mai crește.

Pot folosi unități de container în loc de vw?

Da. Cu cqi mărimea depinde de lățimea containerului, nu a ecranului, dacă părintele are container-type: inline-size.