CSS clamp()-generator
Genereer een vloeiende CSS clamp()-grootte (responsieve typografie) tussen twee schermbreedtes.
- Direct
- Gratis
- Privé (lokaal verwerkt)
- Zonder registratie
Een grootte die het scherm volgt
Voer de min- en max-grootte en de bijbehorende schermbreedtes in: de tool berekent de clamp()-waarde om in je CSS te plakken, met een voorvertoning die op de vensterbreedte reageert.
-
Min-/max-grootte
Bv. 16px tot 24px.
-
Referentieschermen
Bv. 320px tot 1280px.
-
Kopieer de clamp()
In font-size, padding, enz.
Voorbeeld: 16 → 24px (320 → 1280px)
| Item | Waarde |
|---|---|
| Min-/max-grootte | 16px / 24px = 1rem / 1.5rem |
| Schermen | 320px → 1280px |
| Vloeiende helling | 0.833vw |
| Resultaat | clamp(1rem, 0.833rem + 0.833vw, 1.5rem) |
Bij 320px is de grootte 16px, bij 1280px 24px, en ertussen varieert ze lineair. 100% lokale berekening.
Veelgestelde vragen
Waarvoor dient clamp()?
De CSS-functie clamp(min, voorkeur, max) begrenst een waarde tussen een minimum en maximum, met een voorkeurswaarde die zich aanpast aan de schermbreedte. Het is de moderne manier voor vloeiende lettergroottes zonder media queries.
Hoe wordt de voorkeurswaarde berekend?
We trekken een rechte lijn tussen (min-breedte, min-grootte) en (max-breedte, max-grootte). Het middendeel combineert een vaste rem-basis en een vw-helling, bv. 0.833rem + 0.833vw, begrensd door de min/max in rem.
Waarom rem en vw mengen?
vw laat de grootte met de viewportbreedte meegroeien (vloeiendheid); rem voegt een vaste basis toe zodat de helling niet bij nul begint. De combinatie geeft een lineaire, leesbare groei die de gebruikerszoom respecteert.
Moet ik min en max behouden?
Ja. Zonder grenzen zou de tekst piepklein worden op kleine schermen en enorm op zeer grote. clamp() vergrendelt de waarde buiten je bereik van referentiebreedtes.