⭐ 0
🔍
Tekst Bilde PDF og dokumenter Lyd Musikk Elektronikk Tid Verktøy Validatorer Esoterisk Spill

Fluid Spacing Clamp() Generator

Beregn en ekte flytende CSS-klemme()-verdi fra min og maks størrelse over to visningsportbredder, med skråningen og skjæringspunktet vist trinn for trinn og en forhåndsvisning av endring av størrelsen.

Behandler... 0%

Resultat

CSS clamp() fungerer nøyaktig på samme måte for avstand som for skriftstørrelse - egenskapen er tilfeldigvis margin, polstring eller gap i stedet for font-size. Denne siden åpner kalkulatoren med en rekkevidde på 8px til 32px over en 320px til 1280px viewport, et vanlig trinn for seksjonspolstring eller korthull som skal føles tett på en telefon og romslig på et skrivebord uten et mediesøk i sikte.

Den underliggende matematikken bryr seg ikke om hva tallene representerer: den samme helnings- og y-aksen-skjæringsformelen som produserer en flytende overskriftsstørrelse, produserer en væskeavstandsverdi, så sammenbruddet nedenfor viser nøyaktig hvordan 8px og 32px blir til en kopiklar clamp()-linje for polstring: clamp(...).

Dra skyveknappen for visningsportbredde for å forhåndsvise hvordan avstanden ville føles uansett bredde mellom de to bruddpunktene, juster min- og maksverdiene for et strammere eller løsere område, og kopier den ferdige linjen rett inn i hvilken avstandsegenskap som trenger det.

🛡️
Utført i nettleser

Filene og inngangene dine forlater aldri denne enheten. Behandlingen kjører helt offline. 100 % sikker.

Godkjente formater og regler

  • Ekte fluid-typografi matematikk: helning, vw koeffisient og y-akse skjæringspunktet vist eksplisitt, ikke bare den endelige clamp()-linjen.
  • Live forhåndsvisning: dra skyveknappen for visningsportbredde for å se eksempeltekst endre størrelsen nøyaktig slik den ville gjort mens et ekte nettleservindu endres.
  • Typeskalamodus: en basisstørrelse og et forhold fra 1,125 til 1,5 genererer seks fluid clamp()-trinn — small, base, h4, h3, h2, h1 — som kopiklar CSS.

Viktige fordeler

✓ Clamp()-linjen, stignings- og skjæringsnumrene og live-forhåndsvisningen oppdateres alle mens du skriver – ingen knapp å trykke på.
✓ En skyveknapp for visningsportbredde driver en forhåndsvisningsboks, slik at du ser den nøyaktige væskeskaleringen i aksjon mellom minimums- og maksimumsbruddpunktene, ikke bare en formel.
✓ En separat typeskalamodus gjør én grunnstørrelse og -forhold til en full 6-trinns væskeoverskriftsskala, klar som en blokk med egendefinerte CSS-egenskaper.

Brukssaker

  • • Gjør en min/maks skriftstørrelse og viewport-område til en ekte clamp()-linje – helning, vw-koeffisient og skjæringspunkt inkludert – i stedet for å se en fra en veiledning.
  • • Dra en glidebryter for visningsportbredde for å forhåndsvise en flytende overskrift eller kroppsstørrelsen nøyaktig slik den ville gjort mens størrelsen på et ekte nettleservindu endres, før du legger det til et stilark.
  • • Generer en full 6-trinns væsketypeskala (liten til h1) fra én grunnstørrelse og -forhold, kopiert som en klar til å lime inn blokk med egendefinerte CSS-egenskaper.
  • • Bygg en fluid clamp() for avstand (margin, padding, gap) i stedet for font-size - den samme helnings-/skjæringsformelen gjelder for alle CSS-egenskaper.