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

Vätsketyp Skalgenerator

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 räknaren direkt i typskalläge med en bas på 16 px och ett 1,25 (stor tredjedel) förhållande som redan är valt - en solid, allmänt använd utgångspunkt för en typografisk skala. Enbart från dessa två siffror genereras sex storlekar: small, base, h4, h3, h2 och h1, var och en sitt eget fluidclamp()-värde snarare än en enda fast storlek.

Varje steg håller basstorleken förankrad på samma värde på både den mobila och stationära delen, medan rubrikerna skalas upp mer aggressivt på den bredare skrivbordsvyn än på den smala mobila - samma idé som att välja ett mildare förhållande för små skärmar och ett djärvare för stora skärmar, härledd automatiskt från det enda förhållandet du väljer.

Genom att ändra förhållandet till 1,125, 1,2, 1,333 eller 1,5 regenereras hela tabellen omedelbart, och knappen under kopierar alla sex clamp()-värdena som ett färdigt-att-klistra block med anpassade CSS-egenskaper för resten av stilmallen att referera till.

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