CSS Clamp Generator
Genereer vloeiende CSS clamp()-waarden voor lettergroottes met live voorbeeld en schaalgenerator.
① Stel min/max lettergroottes en viewports in ② Klik op Genereren ③ Kopieer de CSS clamp()-waarde
Wat is CSS clamp() voor vloeiende typografie?
De CSS-functie clamp(min, voorkeur, max) maakt echt vloeiende typografie mogelijk die soepel schaalt tussen twee viewport-breedtes zonder breakpoints. De voorkeurswaarde combineert een viewport-relatieve eenheid (vw) en een rem-offset, berekend zodat de lettergrootte exact overeenkomt met het minimum bij de minimale viewport en het maximum bij de maximale viewport.
Veelgestelde vragen
CSS clamp(min, voorkeur, max) accepteert drie argumenten. min is de kleinst mogelijke waarde, voorkeur is de ideale waarde (meestal een vw + rem expressie), en max is de bovengrens. De browser houdt het resultaat altijd tussen min en max.
De helling is (maxGrootte - minGrootte) / (maxViewport - minViewport). Vermenigvuldigd met 100 geeft dit de vw-coefficient. De rem-intercept is (minGrootte - helling x minViewport) / rootSize. De uiteindelijke clamp: clamp(minRem, coefVw + interceptRem, maxRem).
Media queries produceren abrupte sprongen bij breakpoints. clamp() produceert een vloeiende lineaire interpolatie over het hele viewport-bereik. Geen breakpoints nodig, kortere code en visueel verfijnder resultaat.
Voor vanilla CSS declareer je de waarden als custom properties in :root. Voor Tailwind v3 in theme.extend.fontSize. Voor Tailwind v4 gebruik je @theme in het CSS-bestand.
CSS clamp() wordt sinds 2020 ondersteund door alle grote browsers. Wereldwijde ondersteuning is meer dan 97%. Voor legacy browsers gebruik je de px-only fallback voor de clamp()-declaratie.
clamp() werkt voor elke lengte-eigenschap die baat heeft bij vloeiende schaling. Voor typografie elimineert het @media voor font-size. Voor afstanden creert het proportionele layouts.
Veelvoorkomende problemen: (1) Verkeerde root font size. (2) Gemengde eenheden zonder conversie. (3) Min groter dan max. (4) Zeer grote vw-coefficient. Test altijd met de viewport-simulator.