⭐ 0
🔍
Tekst Billede PDF & Docs Lyd Musik Elektronik Tid Hjælpeprogrammer Validatorer Esoterisk Spil

16px til 24px flydende skriftstørrelse

Beregn en rigtig flydende CSS-clamp()-værdi ud fra en min og maks. størrelse på tværs af to viewport-bredder, med hældningen og skæringspunktet vist trin for trin og en live-forhåndsvisning af størrelsen.

Behandler... 0%

Resultat

Flydende skalering af en skriftstørrelse fra 16px til 24px er et af de mest almindelige spørgsmål i CSS clamp()-søgninger, fordi 16px er den næsten universelle brødtekststandard, og 24px er et hyppigt trin op for en lidt større overskrift eller et hovedafsnit. Denne side åbner lommeregneren med præcis det par forudfyldt mod et 320px til 1280px viewport-område, så clamp()-linjen er klar i det øjeblik, den indlæses.

Hvis du kun har brug for den statiske rem eller em svarende til 16px eller 24px - uden nogen viewport-baseret skalering - svarer px til rem-konverteren på det i ét trin; denne lommeregner er til det tilfælde, hvor selve værdien skal ændre sig jævnt, efterhånden som browservinduet ændrer størrelse i stedet for at forblive fast på én remværdi.

Opdelingen nedenunder viser præcis, hvordan 16px og 24px bliver til en hældning, en vw-koefficient og en y-akse-skæring, og skyderen til live preview lader dig trække gennem intervallet 320-1280px for at se teksten vokse fra den ene størrelse til den anden i realtid, før du kopierer CSS-linjen til dit stylesheet.

🛡️
Udføres i browser

Dine filer og input forlader aldrig denne enhed. Behandlingen kører helt offline. 100 % sikker.

Accepterede formater og regler

  • Ægte fluid-typografi matematik: hældning, vw-koefficient og y-akse skæring vist eksplicit, ikke kun den endelige clamp() linje.
  • Live preview: Træk skyderen til visningsportens bredde for at se prøvetekst ændre størrelsen nøjagtigt, som den ville, mens størrelsen på et rigtigt browservindue ændres.
  • Typeskalatilstand: en basisstørrelse og et forhold fra 1,125 til 1,5 genererer seks fluidclamp()-trin - small, base, h4, h3, h2, h1 - som kopiklar CSS.

Vigtige fordele

✓ Clamp()-linjen, hældnings- og skæringsnumrene og live-forhåndsvisningen opdateres alle, mens du skriver - ingen knap at trykke på.
✓ En skyder til visningsportsbredde driver en live forhåndsvisningsboks, så du kan se den nøjagtige væskeskalering i aktion mellem min. og maks. brudpunkter, ikke kun en formel.
✓ En separat typeskalatilstand forvandler én basisstørrelse og -forhold til en fuld 6-trins væskeoverskriftsskala, klar som en blok af CSS-tilpassede egenskaber.

Brug Cases

  • • Gør en min/max skriftstørrelse og viewport-område til en rigtig clamp()-linje - hældning, vw-koefficient og skæringspunkt inkluderet - i stedet for at se en fra en tutorial.
  • • Træk en skyder for viewport-bredde for at få vist en flydende overskrift eller kropsstørrelse, præcis som den ville, mens størrelsen på et rigtigt browservindue ændres, før du overfører det til et stylesheet.
  • • Generer en fuld 6-trins væsketypeskala (lille til h1) fra én basisstørrelse og -forhold, kopieret som en klar-til-indsætte-blok af CSS-tilpassede egenskaber.
  • • Byg en fluid clamp() til mellemrum (margin, padding, gap) i stedet for skriftstørrelse - den samme hældning/skæringsformel gælder for enhver CSS-egenskab.