Generátor CSS clamp
Zadejte šířky obrazovek a velikosti pro malou a velkou obrazovku a vygenerujte CSS, které plynule mění velikost textu nebo mezeru. Zobrazte náhled výstupu v px nebo rem, poté zkopírujte CSS a Tailwind kód nebo je uložte jako text.
Co můžete udělat
Zadat 2 dvojice šířka a velikost
Zadejte velikosti pro malý a velký viewport. Podporuje 6 typů: velikost písma, mezery, vnitřní okraj, vnější okraj, šířku a výšku.
Generovat kód v px nebo rem
Zadejte všechny hodnoty v px a pro výstup zvolte px nebo rem. Získáte deklaraci CSS a kód libovolné vlastnosti pro Tailwind.
Okamžitě zkontrolovat vygenerovaný CSS
Použije CSS na dva prvky v náhledu. Zkontrolujte, jak při aktuální šířce rámečku vypadá text a mezery.
Jak používat
Zvolte vlastnost ke změně
Zvolte vlastnost CSS, kterou chcete zadat, například font-size pro velikost textu nebo gap pro mezery mezi prvky.
Zadat dvě šířky viewportu a velikosti
Zadejte obě šířky viewportu a jejich velikosti v px. Velikost pro menší viewport nesmí být větší než velikost pro větší viewport.
Zkontrolovat výstupní jednotku a generovat
V pokročilých nastaveních zvolte px nebo rem. U rem před stisknutím „Generovat CSS“ zkontrolujte také základní velikost písma.
Náhled a získání kódu
Zkopírujte CSS a vložte tam, kde ho použijete. Otevřete kód pro Tailwind, abyste jej získali. Můžete také zkopírovat obě položky najednou nebo je uložit jako text.
Hodí se, když
Plynule měnit velikosti nadpisů
Když chcete nastavit velikost textu pro úzký i široký viewport a měnit ji mezi těmito šířkami plynule, nikoli po skocích.
Přizpůsobit odsazení viewportu
Když chcete, aby se mezery mezi kartami nebo vnitřní odsazení měnily v nastaveném rozsahu od minima po maximum.
Zadávání plynulých velikostí a čtení náhledu
Tři hodnoty v clamp
clamp je funkce CSS, která určuje minimální hodnotu, plynulou hodnotu a maximální hodnotu. Vygenerovaný vzorec spojuje dva referenční body lineárním výrazem a omezuje velikosti mimo rozsah na krajní hodnoty.
Vstup v px; výstup v px nebo rem
Šířky viewportu i velikosti se zadávají v px. U výstupu v rem se velikosti a konstantní člen dělí základní velikostí písma, zatímco koeficient vw pro šířku viewportu zůstává beze změny.
Přizpůsobit základnu rem místu použití kódu
Ve výchozím stavu kód považuje 1rem za 16px. Pokud je v místě použití kódu jiná velikost písma kořenového prvku, budou se lišit i krajní velikosti a způsob změny velikosti. Zkontrolujte to také tam, kde kód použijete.
Rámeček náhledu určuje šířku viewportu
Náhled je samostatný zobrazovací rámeček. Počítá vw ze šířky uvnitř rámečku, nikoli ze šířky celé obrazovky. Podle vlastnosti se stejný vygenerovaný CSS použije na text, mezeru mezi dvěma prvky, odsazení nebo rozměry prvku.
Zkontrolujte také místo použití kódu
Text i struktura náhledu jsou pevné. Navíc zkontrolujte písma, dlouhý text, zalamování řádků a zvětšování textu v prohlížeči tam, kde kód použijete. Kód pro Tailwind používá formát libovolné vlastnosti; zkontrolujte také, zda je v místě použití rozpoznán a vygenerován.
Často kladené otázky
Co se stane mimo zadaný rozsah šířky viewportu?
Šířky menší než menší zadaná šířka použijí minimální velikost a šířky větší než větší zadaná šířka použijí maximální velikost. U rem musíte použít stejnou základní velikost písma jako při generování kódu.
Jaká je základní velikost písma pro rem?
Určuje, kolik px se použije k výpočtu 1rem. Výchozí je 16px a v pokročilých nastaveních jej můžete změnit na 1–1000px. Přizpůsobte velikost písma kořenového prvku tam, kde kód použijete.
Mohu zadat stejné velikosti nebo záporné hodnoty?
Pro stálou velikost nastavte minimum a maximum na stejnou hodnotu. Záporné hodnoty jsou povoleny pouze u margin. Velikosti, které se s širším viewportem zmenšují, nejsou podporovány.
Změní vlastností nebo hodnot se projeví okamžitě?
Jejich změna vymaže vygenerovaný kód a náhled. Stiskněte „Generovat CSS“ pro jejich aktualizaci. Totéž platí při změně výstupní jednotky nebo základní velikosti písma.
Mohu změnit text náhledu?
Ukázkový text i Aa 123 jsou pevně dané. Funkce pro úpravu textu není k dispozici. Navíc zkontrolujte skutečný text a zobrazovanou šířku na stránce, která vygenerovaný CSS používá.
Vstup a výsledky
- Šířka viewportu
- 1–100000px. Menší šířka viewportu musí být menší než větší. Desetinná čísla jsou také povolena.
- Velikost
- 0–10000px. Pouze margin může klesnout na −10000px. Velikost pro menší viewport nesmí být větší než velikost pro větší viewport.
- Výstup
- Deklarace CSS a libovolná vlastnost pro Tailwind. Uložte obě položky jako css-clamp-generator.txt.
- Přesnost
- Vygenerovaný vzorec používá koeficienty až s 13 platnými číslicemi. U šířek, které jsou tak blízko sebe, že zaokrouhlený vzorec nedokáže reprodukovat referenční body, například, dojde k chybě.