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.

Hier is de CSS-klemgenerator op een echte koers Voer 24 en 48 px in als de maten, 360 en 1440 als de viewports, houd de 16px root, en druk op Klem genereren () De uitvoer is lettergrootte: klem (1,5rem, 1rem + 2,2222vw, 3rem); De preview tabel bevestigt het: 24px op 360, 33.07px op 768, 38.76px op 1024 en 48px op 144. De vloeistof blijft boven het punt 1040.