Kalkulačka CSS clamp()
Zadajte veľkosť pre malé a veľké obrazovky a získajte fluidnú hodnotu clamp(), ktorá sa medzi nimi plynule prispôsobí – pre veľkosť písma, padding, margin či gap.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)Výsledok si zachováva časť v rem v strednom člene, takže text sa pri priblížení na 200 % stále zväčší – hodnota založená čisto na viewport (vw) by to neumožnila.
Fluidný text so správnou veľkosťou.
Výpočet prebieha výhradne vo vašom prehliadači. Nič z toho, čo tu zadáte, sa neodosiela na BroBroGo.
Časté otázky
Ako kalkulačka vytvára hodnotu clamp()?
Zadáte dva body: veľkosť pri malej šírke obrazovky a veľkosť pri veľkej. Kalkulačka medzi nimi vytvorí priamu líniu, takže veľkosť plynule rastie so šírkou obrazovky, a následne ju zabalí do funkcie clamp(), aby nikdy neklesla pod minimálnu veľkosť ani nepresiahla maximálnu. Medzi týmito dvoma šírkami sa veľkosť prispôsobuje fluidne, mimo nich sa drží na najbližšom limite.
Prečo je výsledok v rem a vw namiesto pixelov?
Limity sú v rem a meniaca sa stredná časť si zachováva zložku rem, takže text sa stále zväčšuje, keď si čitateľ priblíži stránku alebo zvýši predvolenú veľkosť písma v prehliadači – hodnota v pixeloch alebo čisto vo vw by to mohla narušiť. Veľkosti zadávate v pixeloch, pretože tak o nich väčšina ľudí uvažuje, a nástroj ich prevedie na rem pomocou vašej základnej veľkosti písma.
Môžem toto použiť aj na rozostupy, nielen na veľkosť písma?
Áno. Rovnaká hodnota funguje pre padding, margin, gap, šírku či výšku – všade tam, kde sa zadáva dĺžka. Prepnite náhľad na Box a sledujte, ako namiesto textu rastú rozostupy. Ak sú vaša minimálna a maximálna veľkosť rovnaké, výsledok sa zjednoduší na obyčajnú pevnú dĺžku, keďže nie je čo prispôsobovať.
Podporujú clamp() všetky prehliadače?
Áno – všetky moderné prehliadače podporujú clamp() už od roku 2020, takže hodnotu môžete nasadiť priamo bez náhradného riešenia (fallbacku). Pri veľmi veľkom maxime alebo rýchlom tempe zmien sa však oplatí rýchlo skontrolovať pri 200 % priblížení, či sa text stále zväčšuje pre čitateľov, ktorí to potrebujú.