Ugrás a tartalomra
🛠️
Whiz Tools

PX-ből REM-be és EM-be Átváltó – Ingyenes CSS Egység Kalkulátor

Váltson át pixeleket REM és EM egységekre azonnal. Ingyenes CSS egység konvertáló reszponzív webdesignhoz. Támogatja az egyedi betűméreteket és valós idejű számításokat a pontos eredményekhez.

PX, REM és EM egységek konvertálása

Konvertáljon pixelek (PX), root em (REM) és em (EM) egységek között. Adjon meg egy értéket bármely mezőben a többi egység egyenértékű értékeinek megtekintéséhez.

px
px
px
rem
em
Vizualizáció nem érhető el negatív vagy nulla értékeknél

Konverziós képletek

  • PX to REM: érték px-ben ÷ gyökér betűméret
  • PX to EM: érték px-ben ÷ szülő elem betűmérete
  • REM to PX: érték rem-ben × gyökér betűméret
  • EM to PX: érték em-ben × szülő elem betűmérete
Betöltési kalkulátor...
📚

Dokumentáció

PX-, REM- és EM-mértékegység-átváltó

A px–rem- és px–em-átváltó a CSS-ben használt hosszmértéket váltja át pixel (px), root em (rem) és em között, a felhasználó által megadott gyökérbetűméret és szülőbetűméret alapján. Ez a három mértékegység a szöveg és a térközök megadásának leggyakoribb módja a CSS-ben, amely weboldalak stílusának kialakítására szolgál.

Mi a px, a rem és az em?

A pixel (px) egy rögzített mértékegység. Az 200px szélességűre beállított doboz mindig 200 px széles marad, függetlenül az oldal betűméretétől.

A rem („root em”) az oldal gyökéreleme – általában az <html> elem – betűméretével arányosan változó mértékegység. A legtöbb böngésző ezt a gyökérbetűméretet alapértelmezés szerint 16 px-re állítja, hacsak a webhely nem módosítja. Ha a gyökérbetűméret 16 px, akkor 1rem értéke 16 px.

Az em olyan mértékegység, amely a szülőelem, vagyis az azt tartalmazó elem betűméretével arányosan változik. Ha egy szülőelem beállítása font-size: 20px, akkor az ezen belüli 1em értéke 20 px.

A rem és az em közötti fő különbség az, hogy mihez viszonyítják őket. A rem mindig a gyökérelemet veszi alapul. Az em a legközelebbi szülőelemhez igazodik, ezért az értéke a beágyazás minden szintjén változhat.

A px remre váltásának kiszámítása

A pixelérték remmé alakításához a pixelértéket el kell osztani a gyökérbetűmérettel:

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

ahol r a remben megadott hossz, p a pixelben megadott hossz, R pedig a pixelben megadott gyökérbetűméret.

Megoldott példa

Az alapértelmezett, 16 px-es gyökérbetűmérettel 24 px így váltható át:

24 ÷ 16 = 1,5 rem

Ha egy webhely a gyökérbetűméretet 10 px-re állítja (ez egy gyakori trükk, amelyhez az html { font-size: 62.5%; } beállítást használják, mivel a 16 px 62,5%-a 10 px), akkor ugyanaz a 24 px-es érték:

24 ÷ 10 = 2,4 rem

A rem px-re váltásának kiszámítása

Az ellenkező irányú átváltáshoz a remértéket meg kell szorozni a gyökérbetűmérettel:

p=r×Rp = r \times R

ahol p a pixelben megadott hossz, r a remben megadott hossz, R pedig a gyökérbetűméret.

16 px-es gyökérbetűmérettel az 1.5rem értéke visszaváltva: 1,5 × 16 = 24 px.

A px emre váltásának kiszámítása

A pixelek emre váltásához a pixelértéket el kell osztani a szülőelem betűméretével:

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

ahol e az emben megadott hossz, P pedig a szülőelem pixelben megadott betűmérete.

Megoldott példa

Ha a szülőelem betűmérete 20 px, akkor 24 px értéke:

24 ÷ 20 = 1,2 em

Az em px-re váltásának kiszámítása

Az emértéket meg kell szorozni a szülőelem betűméretével:

p=e×Pp = e \times P

ahol p a pixelben megadott hossz, e az emben megadott hossz, P pedig a szülőelem betűmérete.

20 px-es szülőelem esetén az 1.2em értéke visszaváltva: 1,2 × 20 = 24 px.

A rem emre, illetve az em remre váltásának kiszámítása

Mivel a rem és az em eltérő betűméretekhez viszonyít, az átváltáshoz a gyökérbetűméretre és a szülőelem betűméretére is szükség van:

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

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

ahol R a gyökérbetűméret, P pedig a szülőelem betűmérete.

Megoldott példa

16 px-es gyökérbetűméret és 20 px-es szülőbetűméret esetén a 2rem értéke:

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

Ha a gyökér- és a szülőelem betűmérete azonos, akkor 1 rem mindig 1 em.

Mikor hasznosak az egyes mértékegységek?

A pixel olyan részleteknél használható jól, amelyeknek nem szabad méretet változtatniuk, például egy 1 px-es szegélynél vagy rögzített szélességű ikonnál.

A rem gyakori választás az olyan térközöknél és tipográfiai beállításoknál, amelyeknek az egész oldalon következetesnek kell maradniuk. Mivel mindig a gyökérbetűmérethez igazodik, a remérték nem változik attól, hogy az elem milyen mélyen van beágyazva. Ez azt is jelenti, hogy a remalapú elrendezések automatikusan alkalmazkodnak, ha valaki növeli böngészője alapértelmezett betűméretét, ami segíti a gyengén látó olvasókat.

Az em jól használható egyetlen, önálló komponensen belül, például egy gombnál, amelynél a belső térköznek a gomb saját betűméretével együtt kell változnia. Az em gyakori problémája, hogy halmozódik: ha több egymásba ágyazott elem mind az font-size: 1.2em beállítást használja, minden szint megszorozza az előző szint értékét, ezért a betűméretek a kívántnál gyorsabban nőnek.

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

Három szint után a szöveg körülbelül 73%-kal nőtt meg, nem pedig 20%-kal, ahogy egy fejlesztő egyetlen 1.2em szabálytól várhatná.

Az átváltó használata

  1. Írjon be egy értéket a pixel-, rem- vagy em-mezőbe.
  2. A másik két mező automatikusan frissül, négy tizedesjegyre kerekítve.
  3. Állítsa a gyökérbetűméretet a projekt <html> elemének megfelelő értékre. A legtöbb böngészőben alapértelmezés szerint 16 px, és csak a remre van hatással.
  4. Állítsa a szülőbetűméretet annak az elemnek a betűméretére, amelyen belül az emérték elhelyezkedne. Ez csak az emre van hatással.
  5. Egy mező értékének másolásához használja a mellette lévő másolás gombot.

Mindkét betűméretmező egész számú pixelértéket fogad el, a legkisebb engedélyezett érték pedig 1 px. A visszaállítás gomb törli az értéket, és mindkét betűméretet visszaállítja 16 px-re.

A mezők alatt az eszköz mértékegységenként egy-egy sávot rajzol. Mindhárom sáv ugyanazt a fizikai hosszt jelöli, ezért azonos szélességűek; ez gyorsan ellenőrizhetővé teszi, hogy az átváltás helyes-e. A sáv a tényleges pixelhosszal jelenik meg 300 px-ig; az ennél hosszabb értékeket a rendszer lekicsinyíti, hogy elférjenek, ezért egy 600 px-es és egy 900 px-es érték is 300 px-nél ér véget. A sávok csak akkor jelennek meg, ha a pixelérték nagyobb nullánál.

Gyakran ismételt kérdések

Mi a különbség a rem és az em között? A rem mindig a gyökérelem betűméretéhez igazodik. Az em a legközelebbi szülőelem betűméretéhez igazodik. A remérték az oldal minden részén azonos marad, az emérték viszont az elem beágyazási mélységétől függően változhat.

Miért 16 px a böngészők alapértelmezett betűmérete? A 16 px régóta a nagy böngészők alapértelmezett szövegmérete, mert tipikus képernyőkön további formázás nélkül is kényelmesen olvasható. A webes akadálymentesítési irányelvek szerint a szövegnek akár 200%-ra is átméretezhetőnek kell lennie az oldal elrendezésének felborulása nélkül, ehhez pedig a 16 px gyakorlatias kiindulási érték.

Mi az a 62,5%-os trükk? A html { font-size: 62.5%; } beállítása az alapértelmezett 16 px-es gyökérbetűméretet 10 px-re változtatja, mivel 62,5% × 16 = 10. Ez egyszerűbbé teszi a remmel végzett számításokat, mert 1,6 rem = 16 px, 2,4 rem pedig 24 px.

Lehetnek negatívak a px-, rem- és emértékek? Igen, a negatív hosszértékeket elfogadó tulajdonságoknál, például margóknál vagy CSS-transzformációknál. A padding CSS-ben nem lehet negatív; a böngészők figyelmen kívül hagyják a negatív paddingértéket. Az átváltó kezeli a negatív értékeket, de nem rajzol hozzájuk sávot, mert a sáv szélessége nem lehet negatív.

Minden pixelértéket remre kell váltani? Nem feltétlenül. A szegélyeket és más finom részleteket általában pixelben hagyják meg, mivel ritkán kell a betűmérettel együtt változniuk, és tört pixeles szélességnél egyenetlenül jelenhetnek meg. A rem olyan térközökhöz és tipográfiai beállításokhoz illik, amelyeknek alkalmazkodniuk kell a felhasználó betűméret-preferenciájához.

Befolyásolja a mértékegység megválasztása az oldal teljesítményét? Nem. A böngészők az elrendezés kiszámítása során minden CSS-hosszt ugyanarra a belső értékre váltanak, ezért a px, a rem és az em ugyanolyan gyorsan jelenik meg. A közöttük való választás a karbantarthatóságra és az akadálymentesítésre, nem pedig a sebességre van hatással.