CSS Clamp() Kalkulačka
Spočítejte reálnou plynulou CSS hodnotu clamp() z minimální a maximální velikosti pro dvě šířky okna, s podrobným zobrazením sklonu a průsečíku a živým náhledem změny velikosti.
🔒 Zpracováno výhradně ve vašem prohlížeči – nic, co zde zadáte, se nikdy nenahraje.
Výsledek
CSS clamp(MIN, PREFERRED, MAX) umožňuje jediné deklaraci nahradit celou hromadu media queries: hodnota zůstává na MIN pod nejmenší šířkou okna, na MAX nad největší a mezi nimi se plynule mění. Obtížnou částí je výraz PREFERRED – výraz relativní k šířce okna, jako 0,833rem + 0,833vw – který nikdo nechce odvozovat ručně. Tato kalkulačka jej vypočítá z reálných čtyř čísel: minimální velikost, maximální velikost a šířku okna, při které každá z nich platí.
Jsou zobrazena všechna mezikroky, ne jen výsledný řádek: sklon (o kolik jednotek velikosti hodnota naroste na pixel šířky okna), tentýž sklon vyjádřený jako koeficient vw a průsečík osy y – konstanta přičtená k vw výrazu, aby přímka procházela přesně dvěma vámi zadanými body. Kdokoliv, kdo někdy vložil hodnotu clamp() z návodu, aniž by jí rozuměl, zde může vidět a zkontrolovat skutečnou aritmetiku.
Posuvník šířky okna ovládá živý náhledový box, takže plynulé škálování je vidět, ne jen vypočítáno: táhněte jím mezi krajními body a sledujte, jak se ukázkový text mění přesně tak, jako byste měnili velikost skutečného okna prohlížeče. Výstupní řádek a rozbor se aktualizují při každém stisku klávesy – to se přirozeně doplňuje s převodníkem px na rem, když je potřeba převést i samotnou základní velikost písma.
Přepněte do režimu typografické stupnice a získejte kompletní plynulý typografický systém v jednom kroku: zadejte základní velikost a modulární poměr (1,125 až 1,5) a získejte šest velikostí – small, base, h4, h3, h2 a h1 – každou vypočítanou jako vlastní výraz clamp() mezi jemnější mobilní posloupností a plným desktopovým poměrem, připravené ke kopírování jako blok CSS proměnných.