CSS clamp()-generator
Genereer een vloeiende CSS clamp()-waarde die soepel schaal tussen twee viewport-breedtes.
CSS clamp()-generator
Vloeiende typografie en afstand schalen een waarde soepel schaal naarmate de viewport verandert, in plaats van te springen tussen vaste grootten bij enkele breekpunten. Dit tool bouwt die waarde voor u: voer een minimale en maximale grootte in, samen met de viewport-breedtes waarop deze van toepassing zijn, en het retourneert een CSS clamp()-functie met lineaire interpolatie ertussenin, klaar om in een stylesheet in te plakken.
Minimale en maximale grootte stellen de twee uiteinden van de schaal in; minimale en maximale viewport-breedte bepalen waar elk uiteinde ingaat — onder de minimale breedte blijft de waarde op zijn vloer, boven het maximum op zijn plafond, en daartussenin groeit het lineair met de viewport. Unit schakelt de uitvoer tussen px en rem, met de root-tekengrootte die de px-naar-rem-conversie bepaalt, en decimale plaatsen bepaalt hoeveel precisie de gegenereerde getallen hebben. Uitvoerindeling verpakt dezelfde clamp() als een eenvoudige verklaring, een CSS custom property, of een Tailwind arbitrary-value class, zodat u deze rechtstreeks in uw code kunt gebruiken.
Het inschakelen van de toegankelijkheidscontrole voegt een notitie toe wanneer de instellingen problemen kunnen veroorzaken: op px gebaseerde grootten negeren de browser-lettergrootteinstelling van een lezer, en een te klein minimum blijft moeilijk te lezen, zelfs voordat het begint te schalen. Beide zijn veel voorkomende fouten in handgeschreven formules voor vloeiende typen, en het tool markeert ze in plaats van ze stilzwijgend te verzenden.
Alles wordt in uw browser berekend terwijl u de opties aanpast — alles wat u invoert, wordt nergens naartoe verzonden. Wanneer het resultaat er goed uitziet, kopieert u het, downloadt u het als .txt-bestand, of stuurt u het naar de invoer van een ander tool om ermee door te gaan.