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

16px till 24px flytande teckenstorlek

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

Att skala en teckensnittsstorlek flytande från 16px till 24px är en av de vanligaste frågorna i CSS clamp()-sökningar, eftersom 16px är den nästan universella brödtextstandarden och 24px är ett vanligt steg upp för en något större rubrik eller ett huvudstycke. Den här sidan öppnar kalkylatorn med exakt det paret förfyllt mot ett 320px till 1280px viewport-intervall, så clamp()-linjen är klar i samma ögonblick som den laddas.

Om du bara behöver den statiska rem eller em motsvarande 16px eller 24px — utan någon viewport-baserad skalning — svarar px till rem-omvandlaren på det i ett steg; den här kalkylatorn är för fallet där själva värdet bör ändras smidigt när webbläsarfönstret ändrar storlek i stället för att förbli fast vid ett remvärde.

Uppdelningen nedan visar exakt hur 16px och 24px förvandlas till en lutning, en vw-koefficient och en y-axels skärning, och reglaget för liveförhandsvisning låter dig dra genom intervallet 320–1280px för att se texten växa från en storlek till den andra i realtid innan du kopierar CSS-raden till din stilmall.

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