Jednotky na webu

Pokud tvoříte web, znalost principů, jak fungují jednotky, je zásadní, aby váš web vypadal dobře a byl i dobře použitelný (= přístupný).

1. Absolutní jednotky

Absolutní jednotky mají pevnou velikost bez ohledu na kontext. Jsou vhodné tam, kde chcete zajistit přesnou velikost nezávislou na vlastnosti rodičů nebo stránky.

px (pixely)

• Asi nejčastější jednotka, se kterou se setkáte. Je super pro přesné rozměry, ale není dostatečně flexibilní pro responzivní design.
• CSS px je vlastně nejmenší bod obrazovky a je konzistentní v rámci celé obrazovky jednoho zařízení,
  • napříč spektrem různých zařízení už ne, protože každé zařízení má pixely jinak velké a tím i jiné rozlišení obrazovky, například retina displeje (tj. ty, které mají vyšší DPI (dots per inch) mohu používat několik fyzických px obrazovky k vykreslení 1 px obrazu.
  • fyzická velikost px není konstantní a liší se podle zařízení.
• Kdy použít: tam, kde chcete přesnou velikost. Např. velikost ikon, okraje, rámečky, stíny, minimální/maximální šířka/výška elementu, tloušťky čar v SVG, přesné výšky nebo šířky (ale s rozumem), případně na přesné mezery mezi elementy (gap, padding, margin, apod).

deg, rad, grad

• Úhlové jednotky.
• Kdy použít: na webu pro různé transformace a animace, kdy chcete něco otočit, případně pro gradienty a další podobné věci.

ms, s

• Jednotky rychlosti a času.
• Kdy použít: na webu pro různé transformace a animace, pro nastavení délky animace, případně zpoždění a pod.

2. Relativní jednotky

Relativní jednotky se přizpůsobují okolním elementům (rodičovským, html nebo obrazovce), a pokud se je naučíte používat, hodně vám to zjednoduší život a realizaci responzivity na webu.

% (procenta)

• % (procenta) – berou si velikost podle rodiče.
• Kdy použít: když potřebujete nastavit velikost elementu podle rodiče (např. obrázek je na 50 % šířky sloupce aj). A tam, kde jsou potřeba % – gradienty, opacity, transformace, atd.

em

• em (emphasized) se odvozuje od velikosti rodiče a vztahuje se k velikosti nastavené u fontu, i když se může použít i jinde (margin, padding, atd).
  • Vysvětlím: Pokud je rodič nastaven např. na 16 px v html elementu (což je defaultní velikost fontů u většiny prohlížečů), pak 2 em je dvojnásobek (32 px), 0.5 em je polovina (8px).
  • Rodič je nejbližší nadřazený element, který zaznamenal nějakou změnu. Pokud je tedy struktura html (16 px) -> div (2 em) -> h2 (3 em), pak h2 bude mít reálně velikost 16 * 2 *3 = 96 px.
• Kdy použít: často se používá v typografii pro nastavení dynamických (myšleno hlavně responzivních) fontů. Případně odsazení (gap, margin, padding).

rem (root em)

• rem (root emphasized) – jsou relativní pouze vůči root elementu, což je element html.
  • Z našeho příkladu výše: html (16 px) -> div (2 rem) -> h2 (3 rem), pak h2 bude mít reálně velikost 16 * 3 = 48 px.
• Kdy použít: kdekoli, kde se potřebujete spolehnout na 1 globální bod, od kterého odpočítáte další (např. rozestupy, marginy, paddingy, velikosti fontů…)

vw (svw, lvw, dvw), vh (svh, lvh, dvh)

• vw (viewport width), vh (viewport height) – jsou jednotky, které jsou relativní k velikosti obrazovky. 1 vw je 1 % šířky obrazovky, 1 vh je 1 % výšky obrazovky. Vždy se vztahují k velikosti obrazovky, nikoli k nějakém rodičovskému elementu.
• svw/svh – hodí se hlavně pro mobily, kde se zobrazí (a při scrolování schová) lišta obrazovky, v tomto případě je to nejmenší velikost obrazovky,
• lvw/lvh – opět ideální pro mobily, v tomto případě je to největší velikost obrazovky (lišty prohlížeče a pod. se ignorují),
• dvw/dvh – opět ideální pro mobily, je to dynamická velikost (takže kdy začnete scrolovat, web se bude rozšiřovat a “lítat” všude možně),
• Kdy použít: všude tam, kde se chcete opřít a spolehnout na reálnou šířku obrazovky. Např. mít obrázek na 33 % obrazovky, pak použijete vw. Ideální např. pro hero sekce, které chcete mít vysoké 80% obrazovky (tj. nastavíte min-height: 80vh), modální prvky, apod.

vmin, vmax

• vmin, vmax – menší nebo větší strana viewportu, což se někdy hodí pro responzivitu.
• Kdy použít: když vám záleží na tom, zda je zařízení na výšku nebo na šířku.

3. Flexibilní jednotky

fr (fraction)

• Skvělá jednotka, která přišla do CSS spolu s gridem,
• Kdy použít: používá se pro rozdělení dostupného prostoru, když procenta nestačí,
  • Např. 1fr 1fr 1fr (udělá tři stejně široké sloupce), 150px 1fr 2fr (udělá 1. sloupec 150 px široký, další bude mít 1/3 zbytku a poslední bude mít 2/3). Je to přesnější a dynamičtější než používat %. Funguje jen u CSS gridu. Je skvělý pro layouty, galerie, aj.

Pozn: Jednotek existuje více, uvádím ty nejzákladnější a nejužitečnější.

Tip: různé jednotky lze použít na různých místech, podle toho, čeho chcete docílit. Pokud chcete mít např. text na jednom řádku pro libovolné zařízení, nastavíte textu/nadpis velikost v jednotkách vw.