CSS clamp() Calculator
Voer een grootte in voor kleine en grote schermen en krijg een vloeiende clamp()-waarde die er prachtig tussenin schaalt — voor lettergroottes, padding, marges of gaps.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)Het resultaat behoudt een rem-deel in de middelste term, zodat tekst nog steeds vergroot wanneer iemand inzoomt naar 200% — een waarde die alleen op de viewport is gebaseerd, doet dat niet.
Vloeiende tekst, precies de juiste maat.
De berekening wordt volledig in je browser uitgevoerd. Niets van wat je hier invoert, wordt geüpload naar BroBroGo.
Veelgestelde vragen
Hoe berekent de calculator de clamp()-waarde?
Je geeft twee punten op: een grootte bij een smal scherm en een grootte bij een breed scherm. De calculator trekt hier een rechte lijn tussen, zodat de grootte vloeiend meeschaalt met de schermbreedte. Dit wordt verpakt in een clamp()-functie, zodat de waarde nooit onder je minimum of boven je maximum uitkomt. Tussen de twee breedtes schaalt de grootte vloeiend; daarbuiten blijft deze steken op de limiet.
Waarom is het resultaat in rem en vw in plaats van pixels?
De grenzen worden uitgedrukt in rem en het variabele middendeel behoudt een rem-component. Hierdoor groeit de tekst netjes mee wanneer een lezer inzoomt of de standaard lettergrootte van de browser aanpast — een waarde in alleen pixels of viewport-eenheden kan dat verstoren. Je voert de maten in pixels in omdat dat makkelijker denkt, en de tool rekent dit om naar rem op basis van je root-lettergrootte.
Kan ik dit ook gebruiken voor marges en tussenruimtes, en niet alleen voor lettergrootte?
Ja. Dezelfde waarde werkt voor padding, margin, gap, width of height — overal waar een lengte-eenheid wordt verwacht. Schakel de preview over naar 'Box' om te zien hoe de tussenruimte groeit in plaats van de tekst. Als je minimale en maximale grootte gelijk zijn, valt het resultaat terug op een vaste lengte, omdat er niets te schalen valt.
Ondersteunen alle browsers clamp()?
Ja — elke moderne browser ondersteunt clamp() sinds 2020, dus je kunt de waarde direct zonder fallback gebruiken. Bij een heel hoog maximum of een snelle schaling is het wel verstandig om even te controleren of de tekst bij 200% zoom nog goed meeschaalt voor gebruikers die dat nodig hebben.