Relativní jednotky
Pixel je tzv. absolutní jednotka - představuje jeden obrazový bod na obrazovce. Právě proto se s ním responzivní stránka píše špatně – velikost, která je akorát na telefonu, je na velkém monitoru k nepřečtení a naopak.
Jeden obrazový bod to ale je jen na běžném monitoru. Telefony mají body displeje (device pixels) tak drobné, že by text vysoký 16 z nich byl sotva vidět. Prohlížeč proto počítá v tzv. CSS pixelech a každý z nich vykreslí na několik fyzických bodů – třeba na čtverec 3 × 3.
Poměru mezi nimi se říká device pixel ratio. Telefon s displejem širokým 1080 fyzických bodů a poměrem 3 se tak stránce hlásí jako 360 pixelů široký a s touhle šířkou počítají i media queries. Poměr svého zařízení zjistíte v konzoli prohlížeče:
> window.devicePixelRatio
???Výsledek schválně neuvádíme, na každém zařízení vyjde jinak.
Telefon se ke své šířce v CSS pixelech přizná jen tehdy, když má stránka v hlavičce <meta name="viewport" content="width=device-width, initial-scale=1">. Bez tohohle řádku se prohlížeč tváří, že je okno široké 980 pixelů, a celou stránku zmenší.
| Jednotka | Počítá se z | Typicky na |
|---|---|---|
rem |
velikosti písma v kořeni dokumentu | mezery, velikosti písma, šířky |
em |
velikosti písma prvku, u font-size z písma rodiče |
vnitřní odsazení tlačítka |
ch |
šířky číslice 0 v daném písmu |
maximální šířku odstavce |
vw, vh |
šířky a výšky okna | velké nadpisy, výšku úvodní sekce |
Dvojice rem a em vypadá skoro stejně, ale chová se úplně jinak, jakmile se prvky zanoří do sebe:
Rozdíl mezi em a rem
em vyjadřuje velikost písma v závislosti na velikosti nastavené na rodiči. Velikost 2em tedy znamená dvojnásobnou velikost písma, jaká je na rodičovském prvku.
rem je závislé na velikosti písma nastavené na kořenovém prvku dokumentu (buď :root, nebo html). Velikost nastavená v rem je vždy stejná, ať je prvek zanořený jakkoli hluboko v hierarchii dalších prvků.
Proč se sází v rem
V prohlížeči se dá nastavit výchozí velikost písma a je to nastavení, které lidé opravdu používají – hlavně ti, kterým drobné písmo dělá potíže. Stránka psaná v rem se s ním zvětší celá, stránka psaná v pixelech bude toto nastavení ignorovat a zhoršíte tak uživatelskou zkušenost.
/* nezvětší se, ať si uživatel nastaví cokoli */
.card {
padding: 24px;
font-size: 16px;
}
/* změní se s nastavením písma v prohlížeči */
.card {
padding: 1.5rem;
font-size: 1rem;
}Výchozí kořenová velikost bývá 16 pixelů, takže 1rem je 16px a 1.5rem je 24px. Pokud si ale uživatel zvětší písmo v prohlížeči, zvětší se adekvátně i vámi nastavené velikosti v rem jednotkách.