Generátor CSS clamp()
Vygeneruj fluidní CSS hodnotu clamp(), která se hladce přizpůsobuje mezi dvěma šířkami viewportu.
Generátor CSS clamp()
Fluidní typografie a rozestup se přizpůsobují hladce, když se viewport změní, místo skákání mezi pevnými velikostmi na pár breakpointech. Tento nástroj za vás vygeneruje hodnotu: zadejte minimální a maximální velikost a šířky viewportu, kde se uplatňují, a dostanete funkci CSS clamp() s lineární interpolací mezi nimi, připravenou vložit do stylu.
Minimální a maximální velikost určují dva konce škály; minimální a maximální šírka viewportu určují, kde se jednotlivé konce aktivují — pod minimální šířkou zůstává hodnota na své dolní hranici, nad maximální na své horní hranici, a mezi nimi roste lineárně s viewportem. Jednotka přepíná výstup mezi px a rem, velikost kořenového písma řídí převod px na rem, a počet desetinných míst určuje přesnost generovaných čísel. Výstupní formát obaluje stejný clamp() jako jednoduchou deklaraci, vlastnost CSS nebo třídu Tailwind, takže ji můžete vložit přímo do jakéhokoliv kódu, na kterém pracujete.
Zapnutí kontroly přístupnosti přidá poznámku, když by nastavení mohlo způsobit problémy: velikost na bázi px ignoruje předvolbu velikosti písma v prohlížeči čtenáře, a minimální hodnota, která je příliš malá, zůstává těžko čitelná i dříve, než se začne měnit. Obojí jsou obvyklé chyby v ručně psaných vzorcích fluidního textu a nástroj je místo tichého zaslání nastavuje.
Všechno se počítá ve vašem prohlížeči, když upravujete možnosti — nic, co zadáte, se neposílá nikam. Když se vám výsledek líbí, zkopírujte ho, stáhněte jako textový soubor nebo pošlete do vstupu jiného nástroje, abyste v práci pokračovali.