⭐ 0
🔍
Tekst Bilde PDF og dokumenter Lyd Musikk Elektronikk Tid Verktøy Validatorer Esoterisk Spill

CSS Clamp()-kalkulator

Regn ut en ekte flytende CSS clamp()-verdi fra en minste- og størstestørrelse over to visningsbredder, med stigningstall og skjæringspunkt vist trinn for trinn og en live forhåndsvisning av skalering.

🔒 Behandles i sin helhet i nettleseren din – ingenting du skriver inn her blir noen gang lastet opp.

Behandler … 0%

Resultat

CSS clamp(MIN, FORETRUKKET, MAKS) lar én deklarasjon erstatte en hel bunke med media queries: verdien holder seg på MIN under den minste visningsbredden, på MAKS over den største, og skalerer jevnt i mellom. Den vanskelige delen er FORETRUKKET-leddet – et visningsbredde-relativt uttrykk som 0,833rem + 0,833vw – som ingen har lyst til å utlede for hånd. Denne kalkulatoren beregner det på ordentlig fra fire tall: en minstestørrelse, en størstestørrelse og visningsbreddene der hver av dem gjelder.

Hvert mellomliggende tall vises, ikke bare den endelige linjen: stigningstallet (hvor mange størrelsesenheter verdien vokser per piksel visningsbredde), det samme stigningstallet uttrykt som en vw-koeffisient, og skjæringspunktet med y-aksen – konstanten som legges til vw-leddet slik at linjen går nøyaktig gjennom de to punktene du spesifiserte. Enhver som har limt inn en clamp()-verdi fra en veiledning uten å forstå den, kan se – og kontrollere – den faktiske aritmetikken her.

En visningsbredde-glidebryter styrer en live forhåndsvisning, slik at den flytende skaleringen er synlig, ikke bare beregnet: dra den mellom minste og største bruddpunkt og se eksempelteksten skalere nøyaktig slik den ville gjort i et ekte nettleservindu. Utdata-linjen og gjennomgangen oppdateres for hvert tastetrykk – dette passer naturlig sammen med px til rem-konvertereren når selve basisskriftstørrelsen også må konverteres.

Bytt til typeskala-modus for et komplett flytende typografisystem i ett trinn: angi en basisstørrelse og et modulært forholdstall (1,125 opp til 1,5) og få seks størrelser – small, base, h4, h3, h2 og h1 – hver beregnet som sin egen clamp()-linje mellom en mildere mobilprogresjon og det fulle skrivebordsforholdstallet, klar til å kopieres som en blokk med CSS custom properties.

Liker du dette verktøyet? Synes du produktet er nyttig? Ser du potensial og ønsker å støtte det?

🛡️
Behandlet i nettleseren

Dine filer og inndata forlater aldri denne enheten. Behandlingen skjer fullstendig frakoblet. 100 % sikkert.

Godkjente formater og regler

  • Ekte flytende typografi-matematikk: stigningstall, vw-koeffisient og skjæringspunkt med y-aksen vises eksplisitt, ikke bare den endelige clamp()-linjen.
  • Live forhåndsvisning: dra i visningsbredde-glidebryteren for å se eksempeltekst skalere nøyaktig slik den ville gjort i et ekte nettleservindu.
  • Typeskala-modus: én basisstørrelse og et forholdstall fra 1,125 til 1,5 genererer seks flytende clamp()-trinn – small, base, h4, h3, h2, h1 – som kopieringsklar CSS.

Viktigste fordeler

✓ clamp()-linjen, stigningstallene og skjæringspunktet, samt forhåndsvisningen, oppdateres mens du skriver – ingen knapp å trykke på.
✓ En visningsbredde-glidebryter styrer en live forhåndsvisning, slik at du ser den nøyaktige flytende skaleringen i praksis mellom minste og største bruddpunkt, ikke bare en formel.
✓ En egen typeskala-modus gjør én basisstørrelse og ett forholdstall om til en full 6-trinns flytende overskriftsskala, klar som en blokk med CSS custom properties.

Bruksområder

  • • Gjør om en min./maks. skriftstørrelse og et viewport-intervall til en ekte clamp()-linje – med stigningstall, vw-koeffisient og skjæringspunkt – i stedet for å gjette ut fra en veiledning.
  • • Dra i en viewport-bredde-glidebryter for å forhåndsvise hvordan en flytende overskrift eller brødtekst endrer størrelse akkurat som i et ekte nettleservindu, før du legger det inn i et stilark.
  • • Generer en full 6-trinns flytende typeskala (fra liten skrift til h1) fra én basisstørrelse og ett forholdstall, kopiert som en ferdig blokk med CSS-egendefinerte egenskaper.
  • • Bygg en flytende clamp() for avstander (margin, padding, gap) i stedet for skriftstørrelse – samme formel med stigningstall og skjæringspunkt gjelder for alle CSS-egenskaper.