CSS clamp()

Genereer responsieve CSS clamp()-waarden voor vloeiende typografie

Over deze calculator

Met CSS clamp() maak je een vloeiende expressie clamp(min, voorkeur, max) die een waarde lineair laat meeschalen tussen twee viewportbreedtes. Geef de minimale en maximale waarde (rem of px) en het viewportbereik op, en de tool leidt de richtingscoëfficiënt in vw en het snijpunt af van de lijn door beide punten, plus de berekende waarden op elk breekpunt als controle. Voor rem wordt een root-lettergrootte van 16px aangenomen. Omgekeerde bereiken geven een validatiefout. Ideaal voor vloeiende typografie en afstanden.

CSS clamp(): zo gebruik je het

  1. Voer je invoer in het veld in of plak die erin.
  2. Lees de uitvoer af — die wordt direct bijgewerkt terwijl je typt.
  3. Pas eventuele opties aan je situatie aan.
  4. Kopieer de URL van de pagina om precies dit resultaat te delen.

Veelvoorkomende voorbeelden

  • 1rem bij 320px → 2rem bij 1280px → clamp(1rem, 1.6667vw + 0.6667rem, 2rem)
  • 1.25rem bij 375px → 3rem bij 1440px → clamp(1.25rem, 2.6291vw + 0.6338rem, 3rem)
  • 16px bij 320px → 32px bij 1200px → clamp(16px, 1.8182vw + 10.1818px, 32px)

Veelgestelde vragen

CSS clamp(): hoe werkt het?

Voer je invoer in of plak die, en de tool verwerkt die direct in je browser en toont meteen het resultaat. Niets van wat je typt wordt naar een server geüpload — de hele berekening gebeurt op je eigen apparaat.

CSS clamp(): wanneer gebruik je dit?

Handig bij ontwikkeling, debuggen, ontwerp en beheer — telkens wanneer je deze omzetting of controle snel wilt uitvoeren zonder iets te installeren of je gegevens aan een externe dienst toe te vertrouwen.

Hoe betrouwbaar zijn de resultaten?

De tool implementeert de betreffende standaard of specificatie rechtstreeks, zodat de uitvoer overeenkomt met wat conforme software oplevert. Randgevallen zoals lege of onjuist opgemaakte invoer worden duidelijk gemeld in plaats van stilzwijgend te mislukken.

Kan ik een specifiek resultaat met iemand anders delen?

Ja. Je invoer wordt in de URL bijgewerkt. Kopieer de adresbalk en deel de link: wie erop klikt, opent de tool in precies dezelfde toestand.