CSS Clamp()-kalkylator

CSS-clamp(MIN, PREFERRED, MAX) låter en enda deklaration ersätta en hel uppsättning media queries: värdet stannar på MIN under den minsta visningsporten, på MAX över den största, och skalas mjukt däremellan. Det svåra är PREFERRED-termen — ett visningsportrelaterat uttryck som 0,833rem + 0,833vw — som ingen vill härleda för hand. Den här kalkylatorn beräknar den på riktigt utifrån fyra tal: en minsta storlek, en största storlek och den visningsportbredd vid vilken var och en gäller.

Varje mellanliggande tal visas, inte bara den slutliga raden: lutningen (hur många storleksenheter värdet växer per visningsportpixel), samma lutning uttryckt som en vw-koefficient, och y-axel-skärningen — den konstant 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 här se, och kontrollera, den faktiska aritmetiken.

Ett reglage för visningsportens bredd driver en förhandsgranskning, så att den flytande skalningen är synlig, inte bara beräknad: dra det mellan den minsta och största brytpunkten och se exempeltexten skalas om exakt som den skulle göra när ett riktigt webbläsarfönster ändrar storlek. Utmatningsraden och redogörelsen uppdateras vid varje knapptryckning — detta passar naturligt ihop med px-till-rem-omvandlaren när basfontstorleken själv också behöver konverteras.

Byt till typografisk skala-läget 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 en egen clamp()-rad mellan en mildare mobilprogression och det fulla skrivbordsförhållandet, redo att kopiera som ett block med CSS-anpassade egenskaper.