Vloeistoftype schaalgenerator
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
Deze pagina opent de rekenmachine rechtstreeks in de typeschaalmodus met een basis van 16 px en een verhouding van 1,25 (grote terts) die al is geselecteerd - een solide, veelgebruikt startpunt voor een typografische schaal. Alleen al uit deze twee getallen worden zes maten gegenereerd: klein, basis, h4, h3, h2 en h1, elk met zijn eigen vloeistofklem()-waarde in plaats van een enkele vaste maat.
Bij elke stap blijft de basisgrootte op dezelfde waarde verankerd op zowel mobiel als desktop, terwijl de kopteksten agressiever worden opgeschaald op de bredere desktopviewport dan op de smalle mobiele viewport - hetzelfde idee als het kiezen van een zachtere verhouding voor kleine schermen en een krachtigere verhouding voor grote schermen, automatisch afgeleid van de enkele verhouding die u kiest.
Als u de verhouding wijzigt naar 1,125, 1,2, 1,333 of 1,5, wordt de hele tabel onmiddellijk opnieuw gegenereerd, en de knop eronder kopieert alle zes klem()-waarden als een kant-en-klaar blok met aangepaste CSS-eigenschappen waar de rest van het stylesheet naar kan verwijzen.