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

Væsketype Skala Generator

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

Denne side åbner lommeregneren direkte i typeskalatilstand med en base på 16px og et 1,25 (større tredjedel) forhold, der allerede er valgt - et solidt, meget brugt udgangspunkt for en typografisk skala. Ud fra disse to tal alene genereres seks størrelser: small, base, h4, h3, h2 og h1, hver sin egen fluid clamp()-værdi i stedet for en enkelt fast størrelse.

Hvert trin holder basisstørrelsen forankret på den samme værdi på både mobil- og desktop-enden, mens overskrifterne skaleres mere aggressivt op på den bredere desktop-visningsport end på den smalle mobile - den samme idé som at vælge et blidere forhold for små skærme og et mere modigt for store skærme, udledt automatisk fra det enkelte forhold, du vælger.

Ændring af forholdet til 1,125, 1,2, 1,333 eller 1,5 regenererer hele tabellen øjeblikkeligt, og knappen nedenunder kopierer alle seks clamp()-værdier som en klar til at indsætte blok af CSS-brugerdefinerede egenskaber, som resten af stilarket kan referere til.

🛡️
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.