Mi a különbség a "px" és az "em" között?

Írásainkat olyan, az informatika iránt érdeklődőknek szánjuk, akik egyelőre még szinte semmit vagy csak nagyon keveset tudnak az IT, weboldal készítés, internet, hálózatok, programozás, stb. világáról. Az általunk használt szavak, kifejezések és magyarázatok a nem szakmabelieknek szólnak. Cserébe közérthetően szeretnénk bemutatni az informatika különböző területeit és fogalmait.

***

Amikor betűméretről van szó, akkor weboldalakkal kapcsolatban sokan még mindig kizárólag pixelekben (px) gondolkodnak. Azonban érdemes tudni, hogy léteznek más mértékegységek is.

A weboldalak tervezésénél többféleképpen lehet meghatározni az oldalon lévő elemek, például a szöveg, a képek és más tartalmak méretét. A két leggyakrabban használt mértékegység a pixel (px) és az em (em).

Pixel

A pixel (px) egy fix mértékegység, amely a weboldal megtekintésére használt eszköz felbontásán alapul. Egy pixel egy pontnak felel meg a képernyőn. Ha egy elem méretének megadásához pixeleket használunk, a méret a weboldal megtekintéséhez használt eszköztől vagy képernyőfelbontástól függetlenül ugyanaz marad. Ez akkor lehet hasznos, ha egyetlen adott képernyőméretre vagy felbontásra tervezünk, mivel biztosítja, hogy az elem mindig ugyanolyan méretű legyen.

em

Az em egy relatív mértékegység, amely a szülőelem (parent element) betűméretén alapul. Egy em megegyezik a szülőelem betűméretével. Ha egy elem méretének megadásához em egységet használunk, a méret a szülőelem betűméretéhez viszonyítva lesz megadva. Ez hasznos lehet reszponzív webhelyek tervezésekor, mivel lehetővé teszi, hogy az elem mérete a szülőelem betűmérete alapján változzon, amely a webhely megtekintéséhez használt eszköz vagy képernyőfelbontás alapján változhat.

rem

Egy másik egység a rem (root em), amely hasonló az em-hez, de ahelyett, hogy a szülőelem betűméretéhez viszonyítana, a gyökérelem (gyakran egy adott html elem) betűméretéhez viszonyít. Ez egységesebb tipográfiát tesz lehetővé az egész webhelyen, mivel meghatározhatjuk a gyökérelem betűméretét, és az összes rem egység ezen fog alapulni.

Általában ajánlott a rem-et használni a betűmérethez, az em-et pedig a kitöltéshez, margóhoz és egyéb elrendezéssel kapcsolatos tulajdonságokhoz.

Összefoglalva

A pixel egy fix mértékegység, amely az eszköz felbontásán alapul, míg az em egy relatív mértékegység, amely a szülőelem betűméretén alapul. Mindkettőnek megvan a maga felhasználási módja, és ennek megfelelően érdemes őket használni.

***

Ha van kedved további IT írásokat olvasgatni, informatika témájú cikkeink listáját erre a linkre kattintva tekintheted meg.
Ha pedig tanulásba fognál, ajánljuk figyelmedbe februárban induló képzéseinket:
Webfejlesztő
Webszerkesztés alapjai
Junior frontend fejlesztő
Junior Java backend fejlesztő
Junior szoftvertesztelő
Junior rendszerüzemeltető