Generátor CSS clamp()
Vygeneruj fluidnú CSS hodnotu clamp(), ktorá sa hladko prispôsobuje medzi dvoma šírkami viewportu.
Generátor CSS clamp()
Fluidná typografia a rozostup sa prispôsobujú hladko, keď sa viewport zmení, namiesto skákavania medzi pevnými veľkosťami pri niekoľkých breakpointoch. Tento nástroj vygeneruje hodnotu za vás: zadajte minimálnu a maximálnu veľkosť a šírky viewportu, na ktorých sa uplatňujú, a dostanete funkciu CSS clamp() s lineárnou interpoláciou medzi nimi, pripravenej na vloženie do štýlu.
Minimálna a maximálna veľkosť určujú dva konce mierky; minimálna a maximálna šírka viewportu určujú, kde sa jednotlivé konce aktivujú — pod minimálnou šírkou zostáva hodnota na jej spodnej hranici, nad maximálnou na jej hornej hranici, a medzi nimi rastie lineárne s viewportom. Jednotka prepína výstup medzi px a rem, veľkosť koreňového fontu riaď konverziu px na rem, a počet desatinných miest určuje presnosť vygenerovaných čísel. Formát výstupu obaľuje rovnaký clamp() ako jednoduchú deklaráciu, vlastnosť CSS alebo triedu Tailwind, takže ho môžete vložiť priamo do ktoréhokoľvek kódu, na ktorom pracujete.
Zapnutie kontroly dostupnosti pridá poznámku, keď by nastavenie mohlo spôsobiť problémy: veľkosť na báze px ignoruje predvoľbu veľkosti písma v prehliadači čitateľa, a minimálna hodnota, ktorá je príliš malá, zostáva ťažko čitateľná aj predtým, než sa začne meniť. Obe sú bežné chyby v ručne písaných formulách fluidného textu a nástroj ich namiesto tichého odoslania nastavuje.
Všetko sa počíta vo vašom prehliadači, keď upravujete možnosti — nič, čo zadáte, sa neposle nikam. Keď vám výsledok vyhovuje, skopírujte ho, stiahnite ako textový súbor alebo odošlite do vstupu iného nástroja, aby ste v práci pokračovali.