Preskočiť na obsah
🛠️
Whiz Tools

PX na REM na EM konvertor – Bezplatná CSS jednotková kalkulačka

Okamžite konvertujte pixely na REM a EM jednotky. Bezplatný konvertor CSS jednotiek pre responzívny webový dizajn. Podporuje vlastné veľkosti písma a výpočty v reálnom čase pre presné výsledky.

Konvertor jednotiek PX, REM a EM

Konvertujte medzi pixelmi (PX), root em (REM) a em (EM) jednotkami. Zadajte hodnotu do ktoréhokoľvek poľa a uvidíte ekvivalentné hodnoty v ostatných jednotkách.

px
px
px
rem
em
Vizualizácia nie je dostupná pre záporné alebo nulové hodnoty

Konverzné vzorce

  • PX na REM: hodnota v px ÷ veľkosť koreňového písma
  • PX na EM: hodnota v px ÷ veľkosť písma nadradného prvku
  • REM na PX: hodnota v rem × veľkosť koreňového písma
  • EM na PX: hodnota v em × veľkosť písma nadradného prvku
Kalkulačka načítavania...
📚

Dokumentácia

Prevodník jednotiek PX, REM a EM

Prevodník px na rem a em mení dĺžku CSS medzi pixelmi (px), koreňovou jednotkou em (rem) a jednotkou em pomocou veľkosti koreňového písma a veľkosti písma nadradeného prvku, ktoré používateľ nastaví. Tieto tri jednotky sú najbežnejšími spôsobmi určovania veľkosti textu a medzier v CSS, jazyku používanom na štýlovanie webových stránok.

Čo sú px, rem a em?

Pixel (px) je pevná jednotka. Rámček so šírkou nastavenou na 200px zostane široký 200 px bez ohľadu na veľkosť písma použitú na stránke.

rem („root em“) je jednotka, ktorá sa mení podľa veľkosti písma koreňového prvku stránky, zvyčajne značky <html>. Väčšina prehliadačov nastavuje veľkosť koreňového písma na 16 px, pokiaľ ju stránka nezmení. Ak je veľkosť koreňového písma 16 px, potom 1rem sa rovná 16 px.

em je jednotka, ktorá sa mení podľa veľkosti písma nadradeného prvku, teda prvku, ktorý ju obsahuje. Ak má nadradený prvok nastavenie font-size: 20px, potom 1em v tomto prvku zodpovedá 20 px.

Hlavný rozdiel medzi rem a em spočíva v tom, voči čomu sa každá z nich meria. Rem vždy vychádza z koreňového prvku. Em vychádza z najbližšieho nadradeného prvku, takže jej hodnota sa môže meniť na každej úrovni vnorenia.

Ako vypočítať px na rem

Ak chcete previesť pixely na rem, vydeľte hodnotu v pixeloch veľkosťou koreňového písma:

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

kde r je dĺžka v rem, p dĺžka v pixeloch a R veľkosť koreňového písma v pixeloch.

Vyriešený príklad

Pri predvolenej veľkosti koreňového písma 16 px sa 24 px prevedie takto:

24 ÷ 16 = 1,5 rem

Ak stránka nastaví veľkosť koreňového písma na 10 px, čo je bežný trik dosiahnutý nastavením html { font-size: 62.5%; }, pretože 62,5 % z 16 px je 10 px, rovnakých 24 px bude:

24 ÷ 10 = 2,4 rem

Ako vypočítať rem na px

Pri opačnom prevode vynásobte hodnotu rem veľkosťou koreňového písma:

p=r×Rp = r \times R

kde p je dĺžka v pixeloch, r dĺžka v rem a R veľkosť koreňového písma.

Pri koreňovej veľkosti 16 px sa 1.5rem spätne prevedie na 1,5 × 16 = 24 px.

Ako vypočítať px na em

Ak chcete previesť pixely na em, vydeľte hodnotu v pixeloch veľkosťou písma nadradeného prvku:

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

kde e je dĺžka v em a P veľkosť písma nadradeného prvku v pixeloch.

Vyriešený príklad

Ak je veľkosť písma nadradeného prvku 20 px, potom sa 24 px prevedie takto:

24 ÷ 20 = 1,2 em

Ako vypočítať em na px

Vynásobte hodnotu em veľkosťou písma nadradeného prvku:

p=e×Pp = e \times P

kde p je dĺžka v pixeloch, e dĺžka v em a P veľkosť písma nadradeného prvku.

Pri nadradenej veľkosti 20 px sa 1.2em spätne prevedie na 1,2 × 20 = 24 px.

Ako vypočítať rem na em a em na rem

Keďže rem a em vychádzajú z rôznych veľkostí písma, prevod medzi nimi vyžaduje veľkosť koreňového písma aj veľkosť písma nadradeného prvku:

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

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

kde R je veľkosť koreňového písma a P veľkosť písma nadradeného prvku.

Vyriešený príklad

Pri veľkosti koreňového písma 16 px a veľkosti písma nadradeného prvku 20 px sa 2rem prevedie takto:

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

Ak sú veľkosti koreňového a nadradeného písma rovnaké, 1 rem sa vždy rovná 1 em.

Kedy je ktorá jednotka užitočná

Pixely sa hodia na detaily, ktorých veľkosť sa nemá meniť, napríklad na okraj s hrúbkou 1 px alebo ikonu s pevnou šírkou.

Rem sa bežne používa na medzery a typografiu, ktoré majú zostať na celej stránke konzistentné. Keďže vždy odkazuje na veľkosť koreňového písma, hodnota rem sa nemení bez ohľadu na hĺbku vnorenia prvku. Rozloženia založené na rem sa tiež automaticky prispôsobia, keď používateľ zväčší predvolenú veľkosť písma v prehliadači, čo pomáha ľuďom so slabým zrakom.

Em sa hodí v rámci jedného samostatného komponentu, napríklad tlačidla, kde sa odsadenie má meniť spolu s veľkosťou písma daného tlačidla. Bežným problémom em je kumulovanie: ak niekoľko vnorených prvkov použije font-size: 1.2em, každá úroveň vynásobí predchádzajúcu, takže veľkosť písma rastie rýchlejšie, než sa zamýšľalo.

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 troch úrovniach sa text zväčší približne o 73 %, nie o 20 %, ktoré by vývojár mohol očakávať od jediného pravidla 1.2em.

Používanie prevodníka

  1. Zadajte hodnotu do poľa pixelov, rem alebo em.
  2. Zvyšné dve polia sa automaticky aktualizujú a zaokrúhlia na štyri desatinné miesta.
  3. Nastavte veľkosť koreňového písma podľa prvku <html> projektu. Vo väčšine prehliadačov je predvolene 16 px a ovplyvňuje iba rem.
  4. Nastavte veľkosť písma nadradeného prvku podľa veľkosti písma prvku, v ktorom by sa nachádzala hodnota em. Ovplyvňuje iba em.
  5. Pomocou tlačidla kopírovania vedľa poľa skopírujete jeho hodnotu.

Obe polia veľkosti písma prijímajú celé číslo pixelov a najmenšia povolená hodnota je 1 px. Tlačidlo obnovenia vymaže hodnotu a nastaví obe veľkosti písma späť na 16 px.

Pod poľami nástroj vykreslí jeden pruh pre každú jednotku. Všetky tri pruhy predstavujú rovnakú fyzickú dĺžku, takže majú rovnakú šírku; je to rýchla kontrola správnosti prevodu. Pruh sa vykreslí v skutočnej dĺžke v pixeloch až do 300 px; všetko dlhšie sa zmenší tak, aby sa zmestilo, takže hodnota 600 px aj hodnota 900 px skončia na300 px. Pruhy sa zobrazia iba vtedy, keď je hodnota v pixeloch väčšia než nula.

Najčastejšie otázky

Aký je rozdiel medzi rem a em? Rem vždy odkazuje na veľkosť písma koreňového prvku. Em odkazuje na veľkosť písma najbližšieho nadradeného prvku. Hodnota rem zostáva na celej stránke rovnaká; hodnota em sa môže meniť podľa hĺbky vnorenia prvku.

Prečo prehliadače používajú ako predvolenú veľkosť písma 16 px? 16 px je v hlavných prehliadačoch už dlho predvolenou veľkosťou textu, pretože sa na bežných obrazovkách pohodlne číta bez ďalšieho štýlovania. Odporúčania pre prístupnosť webu uvádzajú, že text by sa mal dať zväčšiť až na 200 % bez narušenia rozloženia stránky, a 16 px je na to praktická východisková hodnota.

Čo je trik s hodnotou 62,5 %? Nastavenie html { font-size: 62.5%; } zmení predvolenú koreňovú veľkosť 16 px na 10 px, pretože 62,5 % z 16 je 10. Výpočty rem sú potom jednoduchšie, pretože 1,6 rem sa rovná 16 px a 2,4 rem sa rovná 24 px.

Môžu byť hodnoty px, rem a em záporné? Áno, pri vlastnostiach, ktoré povoľujú záporné dĺžky, napríklad pri okrajoch alebo transformáciách CSS. Odsadenie nemôže byť v CSS záporné; prehliadače zápornú hodnotu odsadenia ignorujú. Prevodník spracuje záporné hodnoty, ale nevykreslí pre ne pruhy, pretože pruh nemôže mať zápornú šírku.

Mala by sa každá hodnota v pixeloch previesť na rem? Nie nevyhnutne. Okraje a iné jemné detaily sa zvyčajne ponechávajú v pixeloch, pretože sa len zriedka potrebujú meniť podľa veľkosti písma a pri šírkach menších než jeden pixel môžu vyzerať nerovnomerne. Rem sa hodí na medzery a typografiu, ktoré sa majú meniť podľa preferovanej veľkosti písma používateľa.

Ovplyvňuje výber jednotky výkon stránky? Nie. Prehliadače počas rozloženia prevádzajú každú dĺžku CSS na rovnakú internú hodnotu, takže px, rem a em sa vykresľujú rovnako rýchlo. Výber medzi nimi ovplyvňuje udržiavateľnosť a prístupnosť, nie rýchlosť.