Vloeiende lettertypegrootte Clamp() Generator
Bereken een echte vloeiende CSS-clamp()-waarde op basis van een minimale en maximale grootte over twee viewport-breedten, waarbij de helling en het snijpunt stap voor stap worden weergegeven en een live voorbeeld van het formaat wijzigen.
Resultaat
Op deze pagina wordt de rekenmachine geopend met een algemene, vloeiende instelling voor de lettergrootte die al is ingevuld: 16px bij een 320px-viewport tot 24px bij een 1280px-viewport. Dat is een comfortabel bereik van lichaam tot iets groter dat soepel schaalt van een typisch telefoonscherm naar een typisch desktopvenster, en het is de opstelling die de meeste mensen bedoelen als ze überhaupt naar een vloeiende lettergrootteklem () zoeken.
De vier cijfers zijn voor verandering vatbaar: verhoog de maximale grootte voor een kop in plaats van hoofdtekst, of verklein het viewportbereik als het ontwerp alleen maar hoeft te variëren tussen een tablet en een desktop-breekpunt. Wat u ook invoert, de helling en het snijpunt van de y-as worden op dezelfde manier opnieuw berekend en als expliciete rekenkunde weergegeven, niet verborgen in de laatste regel.
Onder de vier ingangen stuurt een schuifregelaar voor de breedte van de viewport een live voorbeeld aan, zodat de schaling onmiddellijk zichtbaar is en de kopieerklare klem()-regel slechts één klik verwijderd is. Door de uitvoereenheid tussen rem en px te schakelen, wordt elk getal opnieuw berekend zonder de minimale en maximale groottewaarden zelf aan te raken.