Velikost 1 rem — výchozí je 16 px (nastavení prohlížeče).
Velikost písma rodičovského prvku pro výpočet em.
Zadejte hodnotu do kteréhokoli pole — zbylé se ihned přepočítají oběma směry.
Rychlý převod px → rem / em
| Pixely | REM | EM |
|---|
Kliknutím na řádek načtete hodnotu do převodníku.
Jak převodník px na rem použít
- Zadejte hodnotu v pixelech, kterou chcete převést. Třeba 24 nebo 32.
- Zkontrolujte kořenovou velikost písma. Výchozí je 16 px, ale klidně ji přepište podle svého projektu.
- Zvolte směr převodu. Nástroj počítá px na rem i rem na px, stejně tak px na em oběma směry.
- Přečtěte si výsledek. Pod polem najdete referenční tabulku běžných velikostí od 8 do 96 px.
- Klikněte na Kopírovat a vložte hotovou CSS hodnotu přímo do stylů.
Jak převést px na rem
Převod px na rem je prosté dělení. Hodnotu v pixelech vydělíte kořenovou velikostí písma. Ta je ve výchozím stavu 16 px. Takže 24 px odpovídá 1,5 rem, protože 24 děleno 16 je 1,5.
Opačný směr funguje stejně logicky. Rem na px spočítáte vynásobením: 1,25 rem krát 16 dává 20 px. Pokud v projektu používáte jinou základní velikost, třeba 10 px kvůli snazšímu počítání, stačí ji v nástroji přepsat a všechny výsledky se přepočítají podle ní.
Rozdíl mezi px, rem a em
Pixel je absolutní jednotka. 16 px je vždycky 16 px, ať ho napíšete kamkoli. Rem je relativní ke kořenovému elementu, tedy k písmu nastavenému na značce html. Jedna rem má proto na celé stránce stále stejnou velikost, bez ohledu na to, jak hluboko je element zanořený.
Em se chová jinak. Vztahuje se k velikosti písma nejbližšího rodiče, takže se při zanořování násobí. Když má rodič 1,5 em a potomek taky 1,5 em, výsledná velikost potomka je 2,25násobek základu. To bývá zdroj nečekaných výsledků. Rem se tomuto řetězení vyhýbá, a proto ho většina vývojářů volí pro typografii i rozestupy.
Proč používat rem kvůli přístupnosti
Když si uživatel zvětší výchozí písmo v prohlížeči, rozvržení postavené na rem se zvětší spolu s ním. Pixely zůstanou zafixované a text se nepřizpůsobí. Pro lidi se sníženou zrakovou ostrostí je to zásadní rozdíl mezi čitelným a nečitelným webem.
Pravidlo WCAG 1.4.4 navíc vyžaduje, aby šlo text zvětšit na 200 % bez ztráty obsahu nebo funkčnosti. S rem tuhle podmínku splníte prakticky zdarma. U typografie, vnitřních i vnějších okrajů a šířek kontejnerů sáhněte po rem. Rámečky, stíny a drobné detaily můžou klidně zůstat v pixelech, protože se s velikostí písma měnit nemají.
Časté otázky
Kolik je 1 rem v pixelech?
Při výchozím nastavení je 1 rem rovno 16 px. Hodnota se odvíjí od kořenové velikosti písma na značce html. Pokud ji změníte, změní se i přepočet.
Mám používat rem, nebo em?
Pro většinu případů je bezpečnější rem, protože nezávisí na zanoření a chová se předvídatelně. Em se hodí tam, kde chcete, aby se hodnota přizpůsobila konkrétnímu elementu, například odsazení uvnitř tlačítka podle jeho velikosti písma.
Proč se někdy nastavuje kořenové písmo na 62,5 %?
Trik s 62,5 % udělá z 1 rem hodnotu 10 px. Počítání je pak jednodušší, protože 1,8 rem odpovídá 18 px. Uživatelské nastavení písma přitom zůstává zachované, takže o přístupnost nepřijdete.