CSS Clamp Generator

Een CSS-klem () generator bouwt een enkele klem (minimum, voorkeur, maximum) declaratie die een waarde soepel schaalt tussen twee schermbreedtes In plaats van verschillende mediaquery's te schrijven om een koers van 24px op telefoons naar 48px op desktops te zetten, stelt u een minimumgrootte, een maximale grootte en het viewportbereik in waarop ze zijn toegewezen, en de generator retourneert één lijn CSS die elke grootte daartussen interpoleert.

De klem () functie heeft drie argumenten: een ondergrens, een voorkeurswaarde, en een bovengrens De browser gebruikt de voorkeurswaarde tenzij deze onder het minimum of boven het maximum valt, in welk geval hij zich aan die grens vergrendelt Deze generator berekent de voorkeurswaarde als een lineaire functie van de viewport, waarbij een vaste remterm wordt gecombineerd met een vw term, zodat het resultaat in de pas met het venster groeit terwijl het nooit onder je minimum daalt of je maximum overschrijdt Deze techniek wordt vaak vloeistoftypografie genoemd, hoewel het even goed werkt voor marges, opvulling, gaten en breedtes.

Alles wordt berekend in uw browser met JavaScript aan de clientzijde, dus niets dat u invoert wordt geüpload en de tool werkt offline zodra deze is geladen U kunt formaten invoeren in pixels of rem, een aangepaste root lettergrootte instellen en een voorbeeldtabel lezen die de berekende waarde bij gangbare viewport breedtes weergeeft, zodat u kunt bevestigen dat de curve zich gedraagt voordat u de klem () in uw stylesheet plakt.

Fluid sizing heeft één toegankelijkheidsval die het waard is om opzettelijk te vermijden Een klem-expressie waarvan de middelste term puur in viewport-eenheden wordt uitgedrukt, negeert de instelling van de lettergrootte van de lezer, omdat vw er niet op reageert, en tekst die niet kan groeien mislukt WCAG 1.4.4. Een rem-component in de voorkeurswaarde houden, wat de gegenereerde uitvoer doet, betekent dat de grootte nog steeds reageert op browserzoom en op een groter standaardlettertype Stel altijd beide grenzen in: zonder deze schalen de waarde zonder limiet in beide richtingen.