CSS-klem() rekenmachine

Met CSS-clamp(MIN, PREFERRED, MAX) kan één declaratie een hele stapel mediaquery's vervangen: de waarde blijft op MIN onder de kleinste viewport, op MAX boven de grootste, en schaalt soepel daartussenin. Het moeilijkste deel is de VOORKEURSterm – een viewport-relatieve uitdrukking zoals 0.833rem + 0.833vw – die niemand met de hand wil afleiden. Deze rekenmachine berekent dit in werkelijkheid op basis van vier getallen: een minimale grootte, een maximale grootte en de breedte van de viewport waarop elk getal van toepassing is.

Elk tussenliggend getal wordt weergegeven, niet alleen de laatste lijn: de helling (met hoeveel grootte-eenheden de waarde groeit per pixel van de viewport), diezelfde helling uitgedrukt als een vw-coëfficiënt, en het snijpunt van de y-as - de constante toegevoegd aan de vw-term zodat de lijn precies door de twee punten gaat die u hebt opgegeven. Iedereen die een klem()-waarde uit een tutorial heeft geplakt zonder deze te begrijpen, kan hier de werkelijke rekenkunde zien en controleren.

Een schuifregelaar voor de breedte van de viewport stuurt een live preview-vak aan, zodat de vloeiende schaling zichtbaar is en niet alleen wordt berekend: sleep deze tussen de min- en max-breekpunten en zie hoe de voorbeeldtekst wordt vergroot of verkleind, precies zoals het zou gebeuren wanneer een echt browservenster wordt vergroot of verkleind. De uitvoerregel en de uitsplitsing worden bijgewerkt bij elke toetsaanslag - dit gaat op natuurlijke wijze samen met de px naar rem-converter wanneer de basislettergrootte zelf ook moet worden geconverteerd.

Schakel in één stap over naar de typeschaalmodus voor een compleet vloeiend typografiesysteem: voer een basisgrootte en een modulaire verhouding in (1,125 tot 1,5) en krijg zes formaten (klein, basis, h4, h3, h2 en h1), elk berekend als zijn eigen klem()-lijn tussen een zachtere mobiele voortgang en de volledige desktopverhouding, klaar om te kopiëren als een blok met aangepaste CSS-eigenschappen.