DevTulz Online

Převodník PX ↔ REM

px

PX → REM

px

REM → PX

rem

Referenční tabulka

px rem em

Jaký je rozdíl mezi PX a REM?

PX (pixely) je absolutní jednotka — vždy se vykresluje ve stejné fyzické velikosti. REM (root em) je relativní jednotka vycházející z velikosti písma kořenového prvku (ve výchozím nastavení obvykle 16px v prohlížečích). Používání REM usnadňuje tvorbu přístupných a škálovatelných rozvržení, která respektují uživatelova nastavení velikosti písma.

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

  1. Nastavte základní velikost písma (výchozí je 16px — odpovídá většině prohlížečů).

  2. Zadejte hodnotu v pixelech a uvidíte ekvivalentní hodnotu v REM.

  3. Nebo zadejte hodnotu v REM pro převod zpět na pixely.

  4. Použijte níže uvedenou referenční tabulku pro běžné převody velikostí.

Vzorec: rem = px ÷ základní velikost písma. Pro výchozí základ 16px: 1rem = 16px, 0.5rem = 8px, 1.5rem = 24px. Všechny výpočty probíhají okamžitě ve vašem prohlížeči.

Často kladené otázky

Měl bych pro velikosti fontů používat rem nebo em? Používejte rem pro velikosti fontů a většinu mezer. rem je relativní k velikosti kořenového fontu a je konzistentní v celém dokumentu. em je relativní k velikosti fontu nadřazeného prvku, která se ve vnořených prvcích kombinuje a může způsobit neočekávané výsledky. rem je obecně snadnější na pochopení.

Jaká je základní velikost fontu? Většina prohlížečů ve výchozím nastavení používá 16px pro velikost kořenového fontu. Pokud vaše CSS nastaví html { font-size: 62.5%; } (běžný trik), base se stane 10px, což zjednoduší výpočty rem: 1rem = 10px. Upravte základní velikost tohoto nástroje tak, aby odpovídala vašemu projektu.

Proč používat rem místo px pro přístupnost? Uživatelé se zrakovými poruchami nebo čtecími obtížemi mohou v nastavení přístupnosti zvýšit výchozí velikost fontu svého prohlížeče. px jednotky toto nastavení ignorují. rem a em jednotky se škálují podle preference uživatele, což činí UI použitelnější pro všechny.

Keywords: převodník px na rem, rem na px, pixely na rem, převodník jednotek CSS, převodník velikosti písma, responzivní design, kalkulačka rem