Převodník PX na REM a EM – Bezplatný CSS kalkulátor jednotek

Převodník jednotek PX, REM a EM

Převodník px na rem a em převádí délku CSS mezi pixely (px), jednotkou rem a jednotkou em na základě velikosti písma kořenového prvku a velikosti písma rodičovského prvku, které zadá uživatel. Tyto tři jednotky jsou v CSS, jazyce používaném ke stylování webových stránek, nejběžnějšími způsoby určování velikosti textu a mezer.

Co jsou px, rem a em?

Pixel (px) je pevná jednotka. Box široký 200px zůstane široký 200px bez ohledu na velikost písma použitou na stránce.

Rem („root em“) je jednotka, která se přizpůsobuje velikosti písma kořenového prvku stránky, obvykle značky <html>. Prohlížeče obvykle nastavují výchozí velikost písma na 16px, pokud ji web nezmění. Pokud je velikost písma kořenového prvku 16px, pak 1rem odpovídá 16px.

Em je jednotka, která se přizpůsobuje velikosti písma prvku, na kterém je použita. Když em nastavuje samotné font-size, měří se vůči velikosti písma zděděné z rodičovského prvku, tedy prvku, který jej obsahuje. Má-li rodičovský prvek font-size: 20px, pak font-size: 1em uvnitř tohoto rodiče odpovídá 20px. Převodník používá tento případ založený na rodiči.

Hlavní rozdíl mezi rem a em spočívá v tom, vůči čemu se každá z jednotek měří. Rem vždy vychází z kořenového prvku. Em vychází z vlastní nebo zděděné velikosti písma prvku, takže se jeho hodnota může měnit na každé úrovni zanoření.

Jak vypočítat převod px na rem

Pixely převedete na rem vydělením pixelové hodnoty velikostí písma kořenového prvku:

rem = px ÷ velikost písma kořenového prvku

Příklad

Při výchozí velikosti písma kořenového prvku 16px se 24px převede takto:

24 ÷ 16 = 1,5rem

Pokud web nastaví velikost písma kořenového prvku na 10px (běžný postup pomocí nastavení html { font-size: 62.5%; }, protože 62,5 % z 16px je 10px), stejná hodnota 24px bude:

24 ÷ 10 = 2,4rem

Jak vypočítat převod rem na px

Opačný převod provedete vynásobením hodnoty rem velikostí písma kořenového prvku:

px = rem × velikost písma kořenového prvku

Při kořenové velikosti 16px se 1.5rem převede zpět jako 1,5 × 16 = 24px.

Jak vypočítat převod px na em

Pixely převedete na em vydělením pixelové hodnoty velikostí písma rodičovského prvku:

em = px ÷ velikost písma rodičovského prvku

Příklad

Je-li velikost písma rodičovského prvku 20px, pak se 24px převede takto:

24 ÷ 20 = 1,2em

Jak vypočítat převod em na px

Vynásobte hodnotu em velikostí písma rodičovského prvku:

px = em × velikost písma rodičovského prvku

Při velikosti rodičovského prvku 20px se 1.2em převede zpět jako 1,2 × 20 = 24px.

Jak vypočítat převod rem na em a em na rem

Protože rem a em vycházejí z různých velikostí písma, převod mezi nimi vyžaduje velikost písma kořenového i rodičovského prvku:

em = rem × (velikost písma kořenového prvku ÷ velikost písma rodičovského prvku)

rem = em × (velikost písma rodičovského prvku ÷ velikost písma kořenového prvku)

Příklad

Při velikosti písma kořenového prvku 16px a velikosti písma rodičovského prvku 20px se 2rem převede takto:

2 × (16 ÷ 20) = 1,6em

Pokud jsou velikosti písma kořenového i rodičovského prvku stejné, 1rem se vždy rovná 1em.

Kdy se jednotlivé jednotky hodí

Pixely se hodí pro detaily, jejichž velikost se nemá měnit, například pro okraj o šířce 1px nebo ikonu s pevnou šířkou.

Rem se běžně používá pro mezery a typografii, které mají zůstat na celé stránce stejné. Protože vždy odkazuje na velikost písma kořenového prvku, hodnota rem se nemění bez ohledu na hloubku vnoření prvku. Rozvržení založená na rem se také automaticky přizpůsobí, když uživatel zvětší výchozí velikost písma v prohlížeči, což pomáhá lidem se slabým zrakem.

Em se dobře hodí uvnitř jediné samostatné komponenty, například tlačítka, kde se odsazení má měnit spolu s velikostí písma samotného tlačítka. Běžným problémem em je kumulace: pokud několik vnořených prvků používá font-size: 1.2em, každá úroveň násobí předchozí hodnotu, takže velikost písma roste rychleji, než bylo zamýšleno.

Po třech úrovních se text zvětší přibližně o 73 %, nikoli o 20 %, které by vývojář mohl očekávat od jediného pravidla 1.2em.

Použití převodníku

1. Zadejte hodnotu do pole pro pixely, rem nebo em.
2. Ostatní dvě pole se aktualizují automaticky.
3. Nastavte velikost písma kořenového prvku podle prvku <html> v projektu (ve většině prohlížečů ve výchozím stavu 16px).
4. Nastavte velikost písma rodiče podle velikosti písma prvku, uvnitř kterého by hodnota v rem nebo em byla použita.
5. Pomocí tlačítka pro kopírování vedle pole zkopírujete jeho hodnotu.

Nástroj také zobrazuje všechny tři hodnoty vedle sebe, takže lze vizuálně porovnat jejich relativní velikosti.

Často kladené otázky

Jaký je rozdíl mezi rem a em? Rem se vždy vztahuje k velikosti písma kořenového prvku. Em se vztahuje k velikosti písma prvku, na kterém je použit, což je u samotného font-size velikost zděděná z rodiče. Hodnota v rem zůstává na celé stránce stejná; hodnota v em se může měnit podle toho, jak hluboko je prvek zanořen.

Proč prohlížeče používají jako výchozí velikost písma 16px? 16px je obvyklá výchozí velikost textu ve významných prohlížečích a uživatelé ji mohou změnit v nastavení prohlížeče. Pokyny k přístupnosti webu požadují, aby šlo text zvětšit až na 200 procent bez ztráty obsahu nebo funkčnosti. Velikost textu v rem umožňuje stránce řídit se výchozí hodnotou zvolenou čtenářem.

Co je trik 62,5 %? Nastavení html { font-size: 62.5%; } změní výchozí velikost písma kořenového prvku 16px na 10px, protože 62,5 % z 16 je 10. Díky tomu je výpočet rem jednodušší, protože 1,6rem odpovídá 16px a 2,4rem odpovídá 24px.

Mohou být hodnoty px, rem a em záporné? Ano, u vlastností, které záporné délky přijímají, například okraje (margin) nebo transformace CSS. Odsazení (padding) však v CSS záporné být nemůže: záporné hodnoty odsazení jsou neplatné, proto je prohlížeče ignorují.

Je třeba převádět každou pixelovou hodnotu na rem? Ne nutně. Rámečky a další jemné detaily se obvykle ponechávají v pixelech, protože se jen zřídka potřebují měnit podle velikosti písma a při šířkách menších než jeden pixel mohou vypadat nerovnoměrně. Rem se hodí pro mezery a typografii, které se mají přizpůsobit preferované velikosti písma uživatele.

Ovlivňuje volba jednotky výkon stránky? Ne. Prohlížeče při rozvržení převádějí každou délku CSS na stejnou interní hodnotu, takže px, rem i em se vykreslují stejně rychle. Volba mezi nimi ovlivňuje udržovatelnost a přístupnost, nikoli rychlost.

Reference

1. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4. CSS Values and Units Level 4, délky relativní k písmu — em se rovná vypočtené velikosti písma prvku (u font-size zděděné velikosti); rem se rovná jednotce em na kořenovém prvku.
2. Mozilla. font-size, MDN Web Docs. MDN: font-size — pokud není u předků nastavena žádná velikost písma, 1em odpovídá výchozí hodnotě prohlížeče, obvykle 16px.
3. W3C Web Accessibility Initiative. Understanding Success Criterion 1.4.4: Resize Text. WCAG 2.1: vysvětlení kritéria 1.4.4 — text lze zvětšit až na 200 procent bez ztráty obsahu nebo funkčnosti.
4. World Wide Web Consortium (W3C). CSS Box Model Module Level 4. CSS Box Model Level 4 — záporné hodnoty vlastností odsazení jsou neplatné.