Převodník PX na REM

Jak používat převodník PX na REM

1. Nastav Základní velikost písma (px). Ve všech hlavních prohlížečích je to 16, pokud ji tvůj stylopis nezmění. Tlačítka pod polem přepnou na 16 px, 10 px (trik html { font-size: 62.5%; }) nebo 18 px.
2. Pokud pracuješ s em, nastav Velikost písma rodiče pro em (px): vypočtenou velikost písma prvku, který obsahuje ten, který stylizuješ.
3. V části Převést hodnotu piš do pole Pixely (px), REM nebo EM. Ostatní dvě pole se aktualizují při psaní a řádek pod nimi ukazuje použité dělení.
4. Tabulka hromadného převodu uvádí běžné velikosti. Nahraď Hodnoty v pixelech vlastními designovými tokeny (škála mezer, škála písma…) a pomocí Kopírovat tabulku vlož výsledek do tabulky nebo designového dokumentu.
5. Chceš-li migrovat stávající kód, vlož ho do CSS k převodu, vyber volby a klikni na Převést px na rem. Načíst příklad ukáže malý stylopis. Převedené CSS zkopíruješ tlačítkem Kopírovat.

Převod probíhá celý ve tvém prohlížeči. Nic, co vložíš, se neodesílá na server.

Vzorce

• rem = px ÷ základní velikost písma. S výchozími 16 px je 24px = 24 ÷ 16 = 1.5rem.
• em = px ÷ velikost písma rodiče. Uvnitř nadpisu o velikosti 20 px je 10px = 0.5em.
• px = rem × základní velikost písma a px = em × velikost písma rodiče.

rem, nebo em: které použít?

rem („root em“) se vždy vztahuje k velikosti písma prvku html, takže 1.5rem znamená na celé stránce totéž. Je to nejbezpečnější volba pro velikosti písma, mezery, maximální šířky a odstupy v rozložení.

em se vztahuje k velikosti písma samotného prvku (u font-size k velikosti rodiče). Násobí se: seznam o velikosti 0,9 em vnořený třikrát skončí na 0,9 × 0,9 × 0,9 = 73 % základu. Proto se em hodí pro věci, které se mají škálovat s vlastním textem (odsazení tlačítka, velikost ikony vedle popisku) a je riskantní pro globální typografii.

Proč na rem záleží z hlediska přístupnosti

Mnoho lidí zvyšuje výchozí velikost písma v nastavení prohlížeče (například z 16 na 20 nebo 24 px), místo aby přibližovali každou stránku. Velikosti zapsané v px toto nastavení ignorují; velikosti v rem nebo em ho respektují. Použití rem pro text a mezery nechá celé rozložení růst podle volby čtenáře, což pomáhá splnit kritérium úspěšnosti WCAG 2.2 1.4.4 (změna velikosti textu až na 200 %).

Ze stejného důvodu nenastavuj html { font-size: 16px; } v px: použij procento (100%, nebo 62.5%, chceš-li 1 rem = 10 px), aby se nastavení uživatele stále uplatnilo.

Co převodník CSS mění

Nahrazuje čísla následovaná px v deklaracích hodnotou vydělenou základní velikostí písma. Nikdy se nedotýká komentářů, řetězců ani hodnot url().

• Ponechat šířky okrajů a obrysů v px: border, border-*-width, outline, outline-offset a column-rule zůstanou v px, takže tenké čáry zůstanou ostré. border-radius se převádí i tak.
• Ponechat hodnoty 1px: jakákoli hodnota mezi −1px a 1px zůstane beze změny.
• Převést media queries na em (základ 16px): v podmínkách @media se rem a em vždy vztahují k počáteční velikosti písma prohlížeče, nikdy k tvému pravidlu html, takže nástroj dělí 16 a píše tam em, ať je tvá základní velikost jakákoli. Když volbu zrušíš, media queries zůstanou v px.