Prevodník px na rem

Ako používať prevodník px na rem

1. Nastav Základnú veľkosť písma (px). Vo všetkých hlavných prehliadačoch je to 16, pokiaľ ju tvoje štýly nezmenia. Tlačidlá pod poľom prepnú na 16 px, 10 px (trik html { font-size: 62.5%; }) alebo 18 px.
2. Ak pracuješ s em, nastav Veľkosť písma rodiča pre em (px): vypočítanú veľkosť písma prvku, ktorý obsahuje ten, ktorý štýluješ.
3. V časti Previesť hodnotu zadaj hodnotu do Pixely (px), REM alebo EM. Ostatné dve polia sa aktualizujú počas písania a riadok pod nimi ukazuje použité delenie.
4. Hromadná tabuľka prevodov uvádza bežné veľkosti. Nahraď Hodnoty v pixeloch vlastnými dizajnovými tokenmi (škála rozostupov, škála písma…) a pomocou Kopírovať tabuľku vlož výsledok do tabuľky alebo dizajnového dokumentu.
5. Pri migrácii existujúceho kódu ho vlož do CSS na prevod, vyber možnosti a klikni na Previesť px na rem. Načítať príklad ukáže krátky štýl. Prevedené CSS skopíruješ tlačidlom Kopírovať.

Konverzia prebieha celá v tvojom prehliadači. Nič, čo vložíš, sa neodosiela na server.

Vzorce

• rem = px ÷ základná veľkosť písma. S predvolenými 16 px je 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ veľkosť písma rodiča. V nadpise s 20 px je 10px = 0,5em.
• px = rem × základná veľkosť písma a px = em × veľkosť písma rodiča.

rem alebo em: ktoré použiť?

rem („root em“) sa vždy vzťahuje na veľkosť písma prvku html, takže 1.5rem znamená všade na stránke to isté. Je to najbezpečnejšia voľba pre veľkosti písma, rozostupy, maximálne šírky a medzery rozloženia.

em sa vzťahuje na veľkosť písma samotného prvku (pri font-size na veľkosť rodiča). Násobí sa: zoznam s 0,9em vnorený trikrát skončí na 0,9 × 0,9 × 0,9 = 73 % základu. Vďaka tomu je em šikovné pre veci, ktoré sa majú meniť spolu s vlastným textom (odsadenie tlačidla, veľkosť ikony vedľa popisku) a riskantné pre globálnu typografiu.

Prečo je rem dôležité pre prístupnosť

Mnohí ľudia zväčšujú predvolenú veľkosť písma v nastaveniach prehliadača (napríklad zo 16 na 20 alebo 24 px) namiesto približovania každej stránky. Veľkosti zapísané v px toto nastavenie ignorujú; veľkosti v rem alebo em ho sledujú. Použitie rem pre text a rozostupy umožní celému rozloženiu rásť podľa voľby čitateľa, čo pomáha pri kritériu úspešnosti WCAG 2.2 1.4.4 (zmena veľkosti textu až na 200 %).

Z rovnakého dôvodu nenastavuj html { font-size: 16px; } v px: použi percento (100%, alebo 62.5%, ak chceš 1rem = 10px), aby sa nastavenie používateľa stále uplatnilo.

Čo konvertor CSS mení

Nahrádza čísla s px v deklaráciách hodnotou delenou základnou veľkosťou písma. Nikdy sa nedotkne komentárov, reťazcov ani hodnôt url().

• Ponechať šírky okrajov a obrysov v px: border, border-*-width, outline, outline-offset a column-rule zostanú v px, takže tenké čiary zostanú ostré. border-radius sa prevádza aj tak.
• Ponechať hodnoty 1px: každá hodnota medzi −1px a 1px zostane ako je.
• Previesť media queries na em (základ 16px): v podmienkach @media sa rem a em vždy vzťahujú na počiatočnú veľkosť písma prehliadača, nikdy na tvoje pravidlo html, preto nástroj delí 16 a zapíše tam em, bez ohľadu na tvoju základnú veľkosť. Keď je voľba vypnutá, media queries ostanú v px.

V kóde sa používa desatinná bodka (1.5rem), ako to vyžaduje CSS.