CSS Clamp() Kalkulator
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.
Resultat
CSS-klemme(MIN, PREFERRED, MAX) lar én erklæring erstatte en hel stabel med mediespørringer: verdien forblir på MIN under den minste visningsporten, ved MAX over den største, og skaleres jevnt mellom. Den vanskelige delen er det FORETRUKKE begrepet – et viewport-relativt uttrykk som 0.833rem + 0.833vw – som ingen ønsker å utlede for hånd. Denne kalkulatoren beregner den på ekte fra fire tall: en minimumsstørrelse, en maksimal størrelse og visningsportbredden som hver enkelt gjelder.
Hvert mellomliggende tall vises, ikke bare den siste linjen: stigningstallet (hvor mange størrelsesenheter verdien vokser per piksel av viewport), den samme stigningen uttrykt som en vw-koeffisient, og y-aksens skjæringspunkt – konstanten lagt til vw-leddet slik at linjen går gjennom nøyaktig de to punktene du spesifiserte. Alle som har limt inn en clamp()-verdi fra en opplæring uten å forstå den, kan se og sjekke den faktiske aritmetikken her.
En skyveknapp for visningsportbredde driver en forhåndsvisningsboks, slik at flytende skalering er synlig, ikke bare beregnet: dra den mellom minimums- og maksimumsbruddpunktene og se på at eksempelteksten endrer størrelsen nøyaktig slik den ville gjort mens et ekte nettleservindu endres. Utdatalinjen og sammenbruddsoppdateringen ved hvert tastetrykk – dette kobles naturlig sammen med px to rem-konverteren når selve skriftstørrelsen i seg selv må konverteres.
Bytt til typeskalamodus for et komplett flytende typografisystem i ett trinn: skriv inn en grunnstørrelse og et modulært forhold (1,125 opp til 1,5) og få seks størrelser - small, base, h4, h3, h2 og h1 - hver beregnet som sin egen clamp()-linje mellom en mildere mobilprogresjon og hele skrivebordsforholdet, klar til å kopiere som en blokk med CSS-egenskaper.