CSS Clamp() kalkulačka
Vypočítejte skutečnou fluidní hodnotu CSS clamp() z minimální a maximální velikosti přes dvě šířky výřezu, se sklonem a průsečíkem zobrazeným krok za krokem a živým náhledem změny velikosti.
Výsledek
CSS svorka (MIN, PREFERRED, MAX) umožňuje, aby jedna deklarace nahradila celou hromadu mediálních dotazů: hodnota zůstává na MIN pod nejmenším výřezem, na MAX nad největším a mezi nimi se plynule mění. Nejtěžší částí je PREFEROVANÝ termín — výraz relativní k výřezu, jako je 0,833rem + 0,833vw — který nikdo nechce odvozovat ručně. Tato kalkulačka jej vypočítává ze čtyř čísel: minimální velikost, maximální velikost a šířka výřezu, pro kterou platí každé z nich.
Je zobrazeno každé mezičíslo, nejen poslední čára: sklon (o kolik jednotek velikosti hodnota roste na pixel výřezu), stejný sklon vyjádřený jako koeficient vw a průsečík osy y – konstanta přidaná k členu vw, aby čára procházela přesně těmi dvěma body, které jste zadali. Anyone who has pasted a clamp() value from a tutorial without understanding it can see, and check, the actual arithmetic here.
Posuvník šířky výřezu řídí pole živého náhledu, takže plynulé škálování je viditelné, nejen vypočítané: přetáhněte jej mezi minimální a maximální zarážky a sledujte, jak se vzorový text mění přesně tak, jako by se změnila velikost skutečného okna prohlížeče. Výstupní řádek a členění se aktualizují při každém stisku klávesy – to se přirozeně spáruje s převodníkem px na rem, když je třeba převést i samotnou základní velikost písma.
Přepněte do režimu typového měřítka pro kompletní systém tekuté typografie v jednom kroku: zadejte základní velikost a modulární poměr (1,125 až 1,5) a získejte šest velikostí – malá, základní, h4, h3, h2 a h1 – každá je vypočtena jako vlastní čára clamp() mezi jemnějším mobilním postupem a poměrem plné plochy, připravené ke kopírování jako blok vlastních vlastností CSS.