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

16px til 24px flytende skriftstørrelse

Beregn en ekte flytende CSS-klemme()-verdi fra min og maks størrelse over to visningsportbredder, med skråningen og skjæringspunktet vist trinn for trinn og en forhåndsvisning av endring av størrelsen.

Behandler... 0%

Resultat

Å skalere en skriftstørrelse flytende fra 16px til 24px er et av de vanligste spørsmålene i CSS clamp()-søk, fordi 16px er den nesten universelle brødtekststandarden og 24px er et hyppig steg opp for en litt større overskrift eller hovedavsnitt. Denne siden åpner kalkulatoren med akkurat det paret forhåndsfylt mot et 320px til 1280px viewport-område, slik at clamp()-linjen er klar i det øyeblikket den lastes.

Hvis du bare trenger statisk rem eller em-ekvivalent på 16px eller 24px — uten noen viewport-basert skalering — svarer px til rem-konverteren på det i ett trinn; denne kalkulatoren er for tilfellet der selve verdien bør endres jevnt ettersom nettleservinduet endrer størrelse i stedet for å holde seg fast på én remverdi.

Oppdelingen under viser nøyaktig hvordan 16px og 24px blir til en helning, en vw-koeffisient og et skjæringspunkt for y-aksen, og glidebryteren for live forhåndsvisning lar deg dra gjennom området 320–1280px for å se teksten vokse fra en størrelse til den andre i sanntid før du kopierer CSS-linjen inn i stilarket ditt.

🛡️
Utført i nettleser

Filene og inngangene dine forlater aldri denne enheten. Behandlingen kjører helt offline. 100 % sikker.

Godkjente formater og regler

  • Ekte fluid-typografi matematikk: helning, vw koeffisient og y-akse skjæringspunktet vist eksplisitt, ikke bare den endelige clamp()-linjen.
  • Live forhåndsvisning: dra skyveknappen for visningsportbredde for å se eksempeltekst endre størrelsen nøyaktig slik den ville gjort mens et ekte nettleservindu endres.
  • Typeskalamodus: en basisstørrelse og et forhold fra 1,125 til 1,5 genererer seks fluid clamp()-trinn — small, base, h4, h3, h2, h1 — som kopiklar CSS.

Viktige fordeler

✓ Clamp()-linjen, stignings- og skjæringsnumrene og live-forhåndsvisningen oppdateres alle mens du skriver – ingen knapp å trykke på.
✓ En skyveknapp for visningsportbredde driver en forhåndsvisningsboks, slik at du ser den nøyaktige væskeskaleringen i aksjon mellom minimums- og maksimumsbruddpunktene, ikke bare en formel.
✓ En separat typeskalamodus gjør én grunnstørrelse og -forhold til en full 6-trinns væskeoverskriftsskala, klar som en blokk med egendefinerte CSS-egenskaper.

Brukssaker

  • • Gjør en min/maks skriftstørrelse og viewport-område til en ekte clamp()-linje – helning, vw-koeffisient og skjæringspunkt inkludert – i stedet for å se en fra en veiledning.
  • • Dra en glidebryter for visningsportbredde for å forhåndsvise en flytende overskrift eller kroppsstørrelsen nøyaktig slik den ville gjort mens størrelsen på et ekte nettleservindu endres, før du legger det til et stilark.
  • • Generer en full 6-trinns væsketypeskala (liten til h1) fra én grunnstørrelse og -forhold, kopiert som en klar til å lime inn blokk med egendefinerte CSS-egenskaper.
  • • Bygg en fluid clamp() for avstand (margin, padding, gap) i stedet for font-size - den samme helnings-/skjæringsformelen gjelder for alle CSS-egenskaper.