Přeskočit na obsah
🛠️
Whiz Tools

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

Okamžitě převádějte pixely na jednotky REM a EM. Bezplatný převodník CSS jednotek pro responzivní webový design. Podporuje vlastní velikosti písma a výpočty v reálném čase pro přesné výsledky.

Převodník jednotek PX, REM a EM

Převádějte mezi pixely (PX), root em (REM) a em (EM) jednotkami. Zadejte hodnotu do kteréhokoli pole a uvidíte ekvivalentní hodnoty v ostatních jednotkách.

px
px
px
rem
em
Vizualizace není k dispozici pro záporné nebo nulové hodnoty

Převodní vzorce

  • PX na REM: hodnota v px ÷ kořenová velikost písma
  • PX na EM: hodnota v px ÷ velikost písma nadřazeného prvku
  • REM na PX: hodnota v rem × kořenová velikost písma
  • EM na PX: hodnota v em × velikost písma nadřazeného prvku
Kalkulačka načítání...
📚

Dokumentace

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 mění podle velikosti písma kořenového prvku stránky, obvykle značky <html>. Většina prohlížečů nastavuje výchozí velikost písma kořenového prvku na 16px, pokud ji web nezmění. Je-li velikost písma kořenového prvku 16px, pak 1rem odpovídá 16px.

Em je jednotka, která se mění podle velikosti písma rodičovského prvku, tedy prvku, který ji obsahuje. Má-li rodičovský prvek font-size: 20px, pak 1em uvnitř tohoto prvku odpovídá 20px.

Hlavní rozdíl mezi rem a em spočívá v tom, vůči čemu se každá z nich měří. Rem vždy vychází z kořenového prvku. Em vychází z nejbližšího rodičovského prvku, takže její hodnota se může měnit na každé úrovni vnoř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:

r=pRr = \frac{p}{R}

kde r je délka v rem, p délka v pixelech a R velikost písma kořenového prvku v pixelech.

Příklad výpočtu

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:

p=r×Rp = r \times R

kde p je délka v pixelech, r délka v jednotkách rem a R kořenová velikost písma.

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:

e=pPe = \frac{p}{P}

kde e je délka v em a P velikost písma rodičovského prvku v pixelech.

Příklad výpočtu

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:

p=e×Pp = e \times P

kde p je délka v pixelech, e délka v em a P 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:

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

kde R je velikost písma kořenového prvku a P velikost písma rodičovského prvku.

Příklad výpočtu

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.

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

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. Další dvě pole se automaticky aktualizují a hodnoty se zaokrouhlí na čtyři desetinná místa.
  3. Nastavte velikost písma kořenového prvku podle prvku <html> projektu. Ve většině prohlížečů je ve výchozím nastavení 16px a ovlivňuje pouze rem.
  4. Nastavte velikost písma rodičovského prvku podle velikosti písma prvku, uvnitř kterého by se hodnota em nacházela. Ovlivňuje pouze em.
  5. Pomocí tlačítka pro kopírování vedle pole zkopírujete jeho hodnotu.

Obě pole pro velikost písma přijímají celé číslo pixelů a nejmenší povolená hodnota je 1px. Tlačítko resetování vymaže hodnotu a nastaví obě velikosti písma zpět na 16px.

Pod poli nástroj vykreslí jeden pruh pro každou jednotku. Všechny tři pruhy představují stejnou fyzickou délku, takže mají stejnou šířku. To je rychlá kontrola správnosti převodu. Pruh se vykreslí ve skutečné délce v pixelech až do 300px; delší hodnoty se zmenší tak, aby se vešly, takže hodnota 600px i hodnota 900px skončí na 300px. Pruhy se zobrazí pouze tehdy, když je pixelová hodnota větší než nula.

Často kladené otázky

Jaký je rozdíl mezi rem a em? Rem vždy odkazuje na velikost písma kořenového prvku. Em odkazuje na velikost písma nejbližšího rodičovského prvku. Hodnota rem zůstává na celé stránce stejná, zatímco hodnota em se může měnit podle hloubky vnoření prvku.

Proč prohlížeče používají jako výchozí velikost písma 16px? 16px je v hlavních prohlížečích již dlouho výchozí velikostí textu, protože se na běžných obrazovkách pohodlně čte bez dalšího stylování. Pokyny pro přístupnost webu doporučují, aby bylo možné text zvětšit až na 200 %, aniž by se narušilo rozvržení stránky, a 16px je pro tento účel praktickým výchozím bodem.

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é přijímají záporné délky, například u okrajů nebo transformací CSS. Vnitřní odsazení v CSS záporné být nemůže; prohlížeče zápornou hodnotu vnitřního odsazení ignorují. Převodník záporné hodnoty zpracuje, ale nevykreslí pro ně žádné pruhy, protože pruh nemůže mít zápornou šířku.

Je třeba převádět každou pixelovou hodnotu na rem? Ne nutně. Okraje 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.