Kalkulačka CSS clamp pre responzívny text
Nástroj vytvorí CSS clamp zápis pre plynulú veľkosť textu medzi dvoma šírkami obrazovky. Pracuje s minimom, maximom, rozsahom viewportu a základom pre rem.
CSS clamp zápis
clamp(1.25rem, 1rem + 1.25vw, 2rem)
Zadajte minimálnu a maximálnu veľkosť textu a rozsah obrazoviek. Kalkulačka vytvorí hotový CSS clamp zápis.
Ukážka responzívneho textu
Tento text používa vypočítaný CSS clamp.
CSS clamp umožní, aby sa text plynulo zväčšoval medzi minimálnou a maximálnou veľkosťou. Výsledok používajte hlavne pre nadpisy, väčšie texty a responzívnu typografiu.
Kalkulačka CSS clamp pre responzívny text vytvorí zápis typu font-size: clamp(minimum, plynulá hodnota, maximum). Minimálna a maximálna veľkosť sú v rem, aby bol výsledok lepšie použiteľný v responzívnom CSS.
Výpočet CSS clamp pre responzívny text
Kalkulačka CSS clamp pre responzívny text je užitočná pri tvorbe webu, keď chcete, aby sa veľkosť písma plynulo prispôsobovala šírke obrazovky. Hodí sa najmä pre nadpisy, väčšie texty, hero sekcie, titulky kariet alebo iné typografické prvky, ktoré majú byť menšie na mobile a väčšie na desktope bez ručného nastavovania viacerých breakpointov.
Výpočet pracuje s minimálnou veľkosťou textu v px, maximálnou veľkosťou textu v px, minimálnou šírkou obrazovky v px, maximálnou šírkou obrazovky v px a základom pre rem v px. Z týchto hodnôt kalkulačka vytvorí hotový CSS zápis vo forme font-size: clamp(minimum, plynulá hodnota, maximum);. Minimálna a maximálna veľkosť sa zároveň prepočítajú na rem podľa zadaného základu.
Hlavný výsledok zobrazuje kompletnú hodnotu CSS clamp. Okrem nej kalkulačka ukáže aj samotnú clamp hodnotu bez vlastnosti font-size, minimálnu veľkosť textu, maximálnu veľkosť textu, plynulý rozsah obrazovky a vypočítanú strednú hodnotu, ktorá používa kombináciu rem a vw. Pripravený CSS zápis je možné skopírovať a vložiť priamo do štýlov.
Na výsledok má najväčší vplyv rozdiel medzi minimálnou a maximálnou veľkosťou písma a rozsah obrazoviek, medzi ktorými sa má text plynulo meniť. Ak je rozdiel medzi veľkosťami malý, zmena bude veľmi jemná. Ak je maximálna veľkosť príliš vysoká, nadpis môže na veľkých obrazovkách zaberať veľa miesta. Rovnako je dôležitý základ pre rem, pretože podľa neho sa prepočítavajú hodnoty vo výslednom zápise.
Praktický príklad je nadpis, ktorý má mať na mobile minimálne 20 px a na veľkej obrazovke maximálne 32 px. Ak nastavíte rozsah obrazovky od 360 px po 1320 px a základ pre rem 16 px, kalkulačka vytvorí zápis podobný font-size: clamp(1.25rem, calc(1rem + 1.25vw), 2rem);. Text sa tak bude zväčšovať plynulo a zároveň neprekročí nastavené minimum ani maximum.
CSS clamp je vhodný hlavne pre responzívnu typografiu, kde má text prirodzene reagovať na šírku obrazovky. Výsledok je dobré skontrolovať na mobile aj desktope, najmä pri dlhých nadpisoch, veľkých fontoch alebo úzkych kontajneroch, aby text nepretekal a zostal dobre čitateľný.
TIP pre vás
Keď nestačí len výsledok
Kalkulačka pomôže s výpočtom, ale pri škole sa často ráta aj pochopenie postupu. Pozrite si učebnice, pracovné zošity a knihy, ktoré môžu pomôcť deťom aj dospelým pri učení.
Pozrieť učebniceČasté otázky
Čo počíta kalkulačka CSS clamp?
Vytvorí CSS zápis font-size: clamp() pre plynulé zväčšovanie textu medzi minimálnou a maximálnou veľkosťou.
Aké údaje treba zadať?
Zadáva sa minimálna a maximálna veľkosť textu v px, minimálna a maximálna šírka obrazovky v px a základ pre rem.
Aký výsledok kalkulačka zobrazí?
Zobrazí celý CSS zápis, samotnú clamp hodnotu, veľkosti v px a rem, rozsah obrazovky a plynulú hodnotu medzi nimi.
Na čo slúži základ pre rem?
Základ pre rem určuje, podľa akej hodnoty sa pixelové veľkosti prepočítajú na rem. Bežne sa používa 16 px.
Kde sa CSS clamp hodí najviac?
Hodí sa najmä pri responzívnych nadpisoch, väčších textoch a typografii, ktorá sa má plynulo prispôsobovať šírke obrazovky.