Proč používat REM místo PX?
V moderním webdesignu je kladen obrovský důraz na přístupnost (accessibility). Uživatelé se zrakovým omezením si ve svém prohlížeči často zvětšují výchozí písmo (např. z 16px na 24px). Pokud na svém webu použijete pro velikost textu jednotky px, text zůstane "zamčený" a nezvětší se. Jednotky rem se však přizpůsobí nastavení uživatele.
Jaký je rozdíl mezi REM a EM?
- REM (Root EM): Váže se výhradně k základní velikosti fontu kořenového elementu (zpravidla tag
<html>). Pokud je velikost html 16px, 1rem bude vždy 16px kdekoliv na stránce. Proto se rem doporučuje na většinu velikostí, od nadpisů po mezery (margin/padding). - EM: Je závislý na velikosti písma svého přímého rodiče. Pokud má nadřazený
<div>velikost písma 20px, tak uvnitř něj bude 1em znamenat 20px. To může vést k tzv. "kaskádovému zmatku", kdy se em násobí v zanořených prvcích.
Vzorec pro výpočet
Výpočet je velmi jednoduchý. Hodnotu v pixelech vydělíte základní velikostí root elementu:
REM = Pixely / Base Font Size
Například: Při základní velikosti 16px chceme převést 24px do rem. Výpočet je 24 / 16 = 1.5rem.