⭐ 0
🔍
Text Bild PDF och dokument Ljud Musik Elektronik Tid Verktyg Validatorer Esoterik Spel

Fluid Font Size Clamp() Generator

Beräkna ett riktigt flytande CSS-clamp()-värde från en min- och maxstorlek över två vyportsbredder, med lutningen och skärningspunkten som visas steg för steg och en förhandsvisning av storleksändring i realtid.

Bearbetar... 0%

Resultat

Den här sidan öppnar kalkylatorn med en allmän inställning av flytande teckensnittsstorlek som redan är ifylld: 16px vid en 320px visningsport upp till 24px vid en 1280px visningsport. Det är ett bekvämt intervall från kropp till något större som skalas smidigt från en typisk telefonskärm till ett typiskt skrivbordsfönster, och det är den inställning de flesta menar när de söker efter en flytande font-size clamp() i första hand.

De fyra siffrorna är öppna för förändring: höj maxstorleken för en rubrik snarare än brödtext, eller minska visningsområdet om designen bara behöver flexa mellan en surfplatta och en skrivbordsbrytpunkt. Oavsett vad du anger kommer lutningen och y-axelns skärning att beräknas om på samma sätt och visas som explicit aritmetik, inte gömd på den sista raden.

Under de fyra ingångarna driver ett skjutreglage för visningsportens bredd en liveförhandsvisning så att skalningen är synlig omedelbart och den kopieringsklara clamp()-linjen är ett klick bort. Om du växlar utgångsenheten mellan rem och px beräknas varje siffra om utan att beröra själva värdena för min och max.

🛡️
Körs i webbläsare

Dina filer och indata lämnar aldrig den här enheten. Bearbetningen körs helt offline. 100 % säker.

Godkända format och regler

  • Riktig vätsketypografi-matematik: lutning, vw-koefficient och skärningspunkt för y-axeln visas explicit, inte bara den sista clamp()-linjen.
  • Liveförhandsgranskning: dra skjutreglaget för visningsportens bredd för att se exempeltext som ändrar storlek exakt som den skulle göra när ett riktigt webbläsarfönster ändras.
  • Typskalaläge: en basstorlek och ett förhållande från 1,125 till 1,5 genererar sex fluidclamp()-steg — small, base, h4, h3, h2, h1 — som kopieringsklar CSS.

Viktiga fördelar

✓ Clamp()-linjen, siffrorna för lutning och korsning och liveförhandsvisningen uppdateras allt medan du skriver – ingen knapp att trycka på.
✓ Ett skjutreglage för visningsportbredd driver en liveförhandsgranskningsruta, så att du ser den exakta vätskeskalningen i aktion mellan min och max brytpunkter, inte bara en formel.
✓ Ett separat typskaleläge förvandlar en basstorlek och ett förhållande till en fullständig 6-stegs vätskekursskala, redo som ett block av anpassade CSS-egenskaper.

Användningsfall

  • • Förvandla en min/max-teckensnittsstorlek och visningsportomfång till en riktig clamp()-linje – lutning, vw-koefficient och skärningspunkt inkluderad – istället för att se en blick från en handledning.
  • • Dra ett skjutreglage för visningsportbredd för att förhandsgranska en flytande rubrik eller storleksändring av kroppsstorlek exakt som den skulle göra när ett riktigt webbläsarfönster ändras, innan du lägger in det i en stilmall.
  • • Generera en hel 6-stegs vätsketypskala (liten till h1) från en basstorlek och -förhållande, kopierad som ett färdigt-att-klistra block med anpassade CSS-egenskaper.
  • • Bygg en fluid clamp() för mellanrum (marginal, padding, gap) istället för font-size – samma lutning/skärningsformel gäller för alla CSS-egenskaper.