Generátor CSS clamp() zadarmo
Generujte plynulú hodnotu CSS clamp() pre responzívnu typografiu a medzery. Nastavte minimálnu/maximálnu veľkosť a rozsah viewportu, pozrite si živý náhľad a skopírujte jednoriadkové CSS.
Vykreslená veľkosť pri rôznych šírkach okna
clamp(min, preferred, max) plynule škáluje hodnotu podľa šírky okna a potom ju uzamkne na minime a maxime. Nahrádza sadu mediových dotazov pre typografiu, medzery a šírky jedným riadkom.
Bežné použitia
- Vytvorte fluidnu typografiu odozvyHladko škálujte veľkosti fontov medzi mobilným a stolným počítačom s jednou líniou.
- Fluidne okraje a výplňNecháte rozostup sekcie rastú s výhľadom namiesto skakania v prestávkach.
- Nahradzovanie mediálnych dotazov pomocou clamp()Zbalte hromady prestávok nadhodenia do jednej fluidneho hodnoty.
- Vytvorte fluidne typ škályVygenerujte konzistentné kroky clamp() pre typ škály systému dizajnu.
- Fluidni hrdina a titulky zobrazeniaNechajte veľké nadpisy strany pristátia kampane škálujte dramaticky, ale bezpečne.
Ako to funguje
Tento nástroj počíta hodnoty CSS clamp() pomocou ručne napísaného vzorca lineárnej interpolácie — bez knižníc, bez okruhov na server. Zadáte dve veľkosti a dve šírky výrezu; matematika beží okamžite vo vašom prehliadači a vytvorí hotový výraz clamp() na vloženie, s preferovanou hodnotou založenou na vw, ktorá plynulo škáluje vaše písmo alebo odsadenie medzi týmito bodmi zlomu.
- 1Výpočet lineárneho sklonuNástroj počíta sklon pixel na pixel: (maxVeľkosť - minVeľkosť) / (maxVýrez - minVýrez). Tento sklon sa potom prevedie na jednotky vw vynásobením 100, čo je jadro toho, ako funguje CSS škálovanie relatívne k výrezu.
- 2Odvodenie priesečníkaPosun priesečníka (v px alebo rem) sa vypočíta tak, aby lineárna funkcia presne zasiahla vašu minimálnu veľkosť pri minimálnom výreze. Spolu sklon a priesečník tvoria preferovanú hodnotu vnútri clamp() — časť, ktorá sa skutočne škáluje.
- 3Prevod jednotiek a formátovanie výstupuAk zvolíte výstup v rem, každá pixelová hodnota sa pred zapísaním do reťazca clamp() vydelí vašou nastavenou koreňovou veľkosťou písma (predvolene 16 px). Vytvorí sa aj zodpovedajúca Tailwind trieda s ľubovoľnou hodnotou, kde sú medzery nahradené podčiarkovníkmi podľa syntaxe Tailwindu.
- 4Živý náhľad na posuvníku výrezuPosuvník range vám umožňuje posúvať sa od 320px do 1920px šírky. Na každej pozícii ten istý vzorec sklonu a priesečníka vyhodnotí obmedzenú veľkosť v reálnom čase a vykreslí vzorový text v tejto vypočítanej pixelovej veľkosti, takže pred kopírovaním čohokoľvek vidíte správanie škálovania.
Súvisiace nástroje
Generátor CSS mriežky
Vizuálne navrhujte CSS mriežku — stopy, jednotky a medzery — a skopírujte vygenerovaný CSS a HTML.
Aké je rozlíšenie mojej obrazovky
Pozrite si rozlíšenie obrazovky v CSS a skutočných pixeloch, veľkosť okna, pomer pixelov, farebnú hĺbku, HDR, podporu dotyku a obnovovaciu frekvenciu a všetko skopírujte.
Tvorca podpisu
Nakreslite podpis myšou, prstom alebo perom, alebo napíšte svoje meno v písme napodobňujúcom rukopis, a potom ho exportujte ako priehľadný PNG alebo SVG.