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

Fluid Spacing 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

CSS clamp() fungerar på exakt samma sätt för mellanrum som för teckenstorlek - egenskapen råkar bara vara marginal, utfyllnad eller gap istället för teckenstorlek. Den här sidan öppnar kalkylatorn med ett intervall på 8px till 32px över en 320px till 1280px viewport, ett vanligt steg för sektionsutfyllnad eller kortluckor som ska kännas snäva på en telefon och rymlig på en stationär dator utan en mediefråga i sikte.

Den underliggande matematiken bryr sig inte om vad siffrorna representerar: samma lutning och y-axel-skärningsformel som ger en flytande rubrikstorlek producerar ett vätskeavståndsvärde, så uppdelningen nedan visar exakt hur 8px och 32px förvandlas till en kopieringsklar clamp()-linje för utfyllnad: clamp(...).

Dra reglaget för visningsportens bredd för att förhandsgranska hur avståndet skulle kännas på valfri bredd mellan de två brytpunkterna, justera min- och maxvärdena för ett snävare eller lösare intervall och kopiera den färdiga linjen rakt in i vilken avståndsegenskap som helst.

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