Moderní CSS

Výpočty

calc(), min(), max() a clamp(). CSS umí počítat a míchat jednotky, takže spoustu @media vůbec nepotřebujete.

Upravíme úvodní stránku tábora, aby se sama přizpůsobila každé šířce. V náhledu vidíte, kam se dostaneme.

Začátek

Pevná čísla

Hero sekce s velkým nadpisem a pod ním obsah široký 720 px s kartami. Na počítači to vypadá dobře.

Přepněte náhled na Mobil: obsah je širší než telefon, karty vyčuhují a nadpis v 4rem se láme po slovech. Všechno spravíme výpočty.

Funkce · 1

Dopočítat calc()

Obsah má být celá šířka minus 24 px z každé strany, ale nejvýš 720 px. calc() umí odečíst pixely od procent, což ručně spočítat nejde: nevíme, kolik procent bude.

Kolem + a - musí být mezery: calc(100% - 48px). Bez nich to prohlížeč nepochopí.

Funkce · 2

Menší z hodnot min()

Dvě pravidla jdou spojit do jednoho. min() vybere menší ze dvou hodnot: na velké obrazovce 720 px, na malé celou šířku minus okraje.

Uvnitř min(), max() a clamp() se dá počítat rovnou, calc() tam psát nemusíte.

Funkce · 3

Větší z hodnot max()

Hero sekce má mít na širokém monitoru víc vzduchu nahoře a dole. 8vw je 8 % šířky okna, ale na telefonu by to bylo málo (30 px). max() zajistí, že to nikdy nebude méně než 48 px.

Pozor, ať se to neplete: max() nastaví spodní hranici (aspoň 48 px), min() horní (nejvýš 720 px).

Funkce · 4

Plynulá velikost clamp()

Nadpis má růst s šířkou obrazovky, ale ne donekonečna. clamp() má tři hodnoty: nejmenší, ideální a největší. Na telefonu 2rem, na monitoru 4rem a mezi tím plynule.

Přepněte na Desktop a zpět. Prostřední hodnota mísí vw a rem, aby písmo reagovalo i na zvětšení v prohlížeči.

Responzivita

Grid bez @media

Zbývají karty: minmax(340px, 1fr) chce sloupec aspoň 340 px. Obsah je na telefonu užší (327 px), takže karty přečuhují přes jeho pravý okraj, na menším telefonu i mimo obrazovku. Nejmenší šířku proto omezíme přes min(): 340 px, nebo celá šířka, když je menší.

Celá stránka teď funguje od telefonu po monitor a nemá jediné @media. Výpočty a @media se ale nevylučují: kde se layout mění skokem, @media pořád potřebujete.

Shrnutí

Nechat prohlížeč počítat

Ano

• calc() pro míchání jednotek
• min(720px, 100% - 48px) pro šířku obsahu
• max() pro spodní hranici
• clamp() pro plynulou velikost písma
• minmax(min(…, 100%), 1fr) pro gridy

Ne

• pevné šířky větší než telefon
• písmo jen ve vw bez clamp(): na monitoru obří, na telefonu mrňavé

Další lekce: Container queries →