CSS clamp()-kalkulator

Angi en størrelse for små og store skjermer og få en flytende clamp()-verdi som skalerer trinnløst i mellom — for skriftstørrelser, padding, marginer eller gap.

Størrelser
Minimum
Maksimum
clamp()-verdi
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

Resultatet beholder en rem-del i det midterste leddet, slik at teksten fortsatt forstørres når noen zoomer til 200% — en verdi basert kun på viewport ville ikke gjort det.

Forhåndsvisning

Flytende tekst, perfekt tilpasset.

Juster størrelsene og skjermbreddene for å forme verdien.

Beregningen kjøres i sin helhet i nettleseren din. Ingenting du skriver inn her lastes opp til BroBroGo.

Ofte stilte spørsmål

Hvordan bygger kalkulatoren clamp()-verdien?

Du oppgir to punkter: en størrelse ved en liten skjermbredde og en størrelse ved en stor skjermbredde. Den tegner en rett linje mellom dem slik at størrelsen vokser trinnløst etter hvert som skjermen blir bredere, og pakker den inn i clamp() slik at den aldri faller under minimumsstørrelsen eller overstiger maksimumsstørrelsen. Mellom de to breddene skalerer størrelsen flytende; utenfor låses den til nærmeste grense.

Hvorfor er resultatet i rem og vw i stedet for piksler?

Grensene er i rem, og den dynamiske midtre delen beholder en rem-komponent, slik at teksten fortsatt vokser når en bruker zoomer inn eller øker nettleserens standard skriftstørrelse — en verdi i piksler eller kun viewport kan forhindre dette. Du skriver inn størrelser i piksler fordi det er slik de fleste tenker på dem, og verktøyet konverterer til rem basert på din rot-skriftstørrelse.

Kan jeg bruke dette til avstander, og ikke bare skriftstørrelse?

Ja. Den samme verdien fungerer for padding, margin, gap, bredde eller høyde — overalt der du kan bruke en lengde. Bytt forhåndsvisningen til «Boks» for å se avstanden vokse i stedet for tekst. Hvis minimums- og maksimumsstørrelsen er like, kollapser resultatet til en vanlig fast lengde, siden det ikke er noe å skalere.

Støtter alle nettlesere clamp()?

Ja — alle moderne nettlesere har støttet clamp() siden 2020, så du kan bruke verdien som den er uten fallback. Ved svært store maksimale verdier eller rask endringstakt, lønner det seg å ta en rask sjekk med 200% zoom for å sikre at teksten fortsatt forstørres for brukere som trenger det.

CSS Cubic Bezier-generatorDra i de to håndtakene for å forme en overgangskurve, se en prikk følge den mot en jevn bevegelse, og kopier cubic-bezier()-verdien.Box Shadow-generatorDra i glidebryterne for å forme en box-shadow, stable lag for dybde, og kopier den ferdige CSS-koden umiddelbart.Gradient-generatorBygg en lineær, radial eller konisk gradient, legg til fargepunkter og angi retning, og kopier deretter CSS-koden med ett klikk.Border Radius-generatorRund av hvert hjørne med glidebrytere, lag organiske former med elliptisk modus, og kopier CSS-koden umiddelbart.Flexbox-generatorSett opp en flex-container og tilhørende elementer med visuelle kontroller, se layouten reagere live, og kopier CSS-koden med ett klikk.CSS Grid-generatorDefiner kolonner og rader, dra over rutene for å plassere elementer, og kopier CSS-koden med tilhørende HTML med ett klikk.CSS-formaterer og -minifisererRydd opp i uoversiktlig CSS for å gjøre den lesbar, eller minifiser den for raskere innlasting – med en sikker modus som aldri endrer rekkefølgen på reglene dine.Konverterer for px til rem og emKonverter mellom px, rem og em med dine egne innstillinger for rot- og kontekststørrelse — rediger et felt og de to andre oppdateres mens du skriver.