CSS Clamp()-kalkylator

CSS-klämma(MIN, PREFERRED, MAX) låter en deklaration ersätta en hel stapel med mediefrågor: värdet stannar vid MIN under den minsta visningsporten, vid MAX över den största, och skalas smidigt däremellan. Det svåra är den FÖREDRAGNA termen – ett viewport-relativt uttryck som 0,833rem + 0,833vw – som ingen vill härleda för hand. Den här kalkylatorn beräknar det på riktigt från fyra siffror: en minimistorlek, en maxstorlek och visningsportbredden där var och en gäller.

Varje mellanliggande tal visas, inte bara den sista raden: lutningen (hur många storleksenheter värdet växer per bildpunkt i visningsområdet), samma lutning uttryckt som en vw-koefficient och y-axelns skärning - konstanten som läggs till vw-termen så att linjen passerar genom exakt de två punkter du angav. Alla som har klistrat in ett clamp()-värde från en handledning utan att förstå det kan se och kontrollera själva aritmetiken här.

En skjutreglage för visningsportbredd driver en liveförhandsgranskningsruta, så att vätskeskalningen är synlig, inte bara beräknad: dra den mellan min och max brytpunkter och se exempeltexten ändra storlek exakt som den skulle medan ett riktigt webbläsarfönster ändras storlek. Utdataraden och uppdelningsuppdateringen vid varje tangenttryckning - detta parar sig naturligt med px to rem-omvandlaren när själva basfontstorleken också behöver konverteras.

Byt till typskalaläge för ett komplett flytande typografisystem i ett steg: ange en basstorlek och ett modulärt förhållande (1,125 upp till 1,5) och få sex storlekar - small, base, h4, h3, h2 och h1 - var och en beräknad som sin egen clamp()-linje mellan en mjukare mobil progression och hela skrivbordsförhållandet, redo att kopieras som ett block av CSS-anpassade egenskaper.