Px vs. Em vs. Rem: Melyik CSS-egységet használja?

Meg fog tanulni néhány CSS-egységet a szöveg betűméretének testreszabásához weboldalak készítése során. Sok mértékegység létezik, például pt, pc, ex stb., de a legtöbb esetben a három legnépszerűbb egységre kell összpontosítania: px, em és rem. Sok fejlesztő általában nem érti, mi a különbség ezek között az egységek között; így az alábbiakban ezeknek az egységeknek a részletes magyarázata található.

Mielőtt továbblépne, vegye figyelembe, hogy kétféle egységhossz létezik: abszolút és relatív.

Abszolút hosszúságok

Az abszolút hossz mértékegységei rögzítettek, és az ezek bármelyikében kifejezett hosszúság pontosan ennek a méretnek fog megjelenni.

Abszolút hosszúság mértékegységek használata nem javasolt a képernyőn, mert a képernyő mérete nagyon eltérő. Használhatók azonban, ha a kimeneti adathordozó ismert, például nyomtatott elrendezéshez.

Relatív hosszúságok

A relatív hosszúság mértékegységei egy másik hossztulajdonsághoz viszonyított hosszúságot adnak meg. A relatív hosszúság mértékegységei jobban skálázódnak a különböző megjelenítési médiumok között.

1. Px (pixel)

A pixel valószínűleg a leggyakrabban használt egység a CSS-ben, és nagyon népszerű a weboldalakon található szöveg betűméretének beállításakor. Egy képpont (1 képpont) a nyomtatási médiában a hüvelyk 1/96-od része.

A számítógép képernyőjén azonban ezek általában nem kapcsolódnak tényleges méretekhez, például centiméterekhez és hüvelykekhez, mint gondolnád; csak kicsinek, de láthatónak vannak meghatározva. Az, hogy mit tekintenek láthatónak, az eszköztől függ.

A különböző eszközök képernyőjén eltérő számú pixel van hüvelykenként, ezt pixelsűrűségnek nevezik. Ha az eszköz képernyőjén lévő fizikai képpontok számát használná az eszközön lévő tartalom méretének meghatározásához, akkor problémát okozna, hogy a dolgok minden méretű képernyőn ugyanúgy nézzenek ki.

Itt jön be az eszköz pixelaránya. Ez lényegében csak egy módszer annak kiszámítására, hogy egy CSS-pixel (1px) mennyi helyet foglal el az eszköz képernyőjén, ami lehetővé teszi, hogy egy másik eszközhöz képest ugyanolyan méretűnek tűnjön.

Alább egy példa: -

<div class="tartály">
<div>
<h1>Ez egy bekezdés</h1>
<p>
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
 Reprehenderit incidunt perferendis iure veritatis cupiditate delectus
 omnis at! Officiis praesentium officia, nemo veniam consequatur
 nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor
 sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus
 amet possimus iure impedit differentio aliquid debitis, autem
 vel ullam aut, quod corporis ratione atque ducimus dolorum.
</p>
</div>
</div>

.tartály {
 szélesség: 100%;
 magasság: 100vh;
 kijelző: flex;
 indokol-tartalom: center;
 align-ites: center;
}
.tartálydiv {
 maximális szélesség: 500 képpont;
 padding: 5px 20px;
 szegély: 1 képpont szürke, szilárd;
 határsugár: 10 képpont;
}
p {
 betűméret: 16 képpont;
}

Kimenet

A felső doboz úgy néz ki, mint egy nagyobb képernyőn, például egy laptopon, az alsó pedig az, ahogyan amikor egy kisebb képernyőn, például egy telefonon jeleníti meg.

Figyelje meg, hogy a szöveg mindkét mezőben azonos méretű, alapvetően így működik a pixel. Segítségével a webes tartalom (nem csak a szöveg) azonos méretűnek tűnhet minden eszközön.

2. Em (M)

Az em egység a nevét a nagy „M” (em) betűről kapta, mivel a legtöbb CSS egység a tipográfiából származik. A szülőelem aktuális betűméretét használja alapként. Használható egy elem betűméretének növelésére vagy kicsinyítésére a szülőtől örökölt betűméret alapján.

Tegyük fel, hogy van egy szülő div, amelynek betűmérete 16 képpont. Ha létrehoz egy bekezdéselemet abban a divben, és 1 em betűméretet ad neki, a bekezdés betűmérete 16 képpont lesz.

Ha azonban egy másik bekezdést ad meg a 2em betűmérettel, az 32 képpontot jelent. Tekintsük az alábbi példát:

<div class="div-one">
<p osztály="egy-em">1 em 10px alapján</p>
<p osztály="két-em">2 em 10px alapján</p>
</div>
<div class="div-kettő">
<p osztály="egy-em">1 em 10px alapján</p>
<p osztály="két-em">2 em 10px alapján</p>
</div>
</div>

.div-one {
 betűméret: 15 képpont;
}
.div-kettő {
 betűméret: 20 képpont;
}
.egy-em {
 betűméret: 1em;
}
.két-em {
 betűméret: 2em;
}

Kimenet

Megtekintheti, hogyan tudják felnagyítani a szöveg méretét, és hogyan befolyásolja azt a szülőtárolótól örökölt aktuális betűméret. Nem tanácsos ezeket használni, különösen összetett szerkezetű oldalakon.

Ha nem megfelelően használja, léptékezési problémákba ütközhet, ahol az elemek mérete nem megfelelő a DOM-fában lévő méretek összetett öröklődése alapján.

3. Rem (Root Em)

A Rem majdnem ugyanúgy működik, mint az em, de a fő különbség az, hogy a rem csak az oldal gyökérelemének betűméretére hivatkozik, nem pedig a szülő betűméretére. A gyökér betűméret a felhasználó által a böngésző beállításaiban vagy Ön, a fejlesztő által megadott alapértelmezett betűméret.

A webböngésző alapértelmezett betűmérete általában 16 képpont, ezért az 1 rem 16 képpont, a 2 rem pedig 32 képpont. Abban az esetben azonban, ha a gyökér betűméretet például 10 képpontra módosítják; 1 rem 10 képpont, 2 rem 20 képpont lesz.

Íme egy példa, hogy világosabb legyen a dolog:

<div class="div-one">
<! -- EM -->
<p osztály="egy-em">1 em tároló alapján (40 képpont)</p>
<p osztály="két-em">2 em tároló alapján (40 képpont)</p>
<!-- REM -->
<p osztály="egy-rem">1 rem a gyökér alapján (16 képpont)</p>
<p osztály="két-rem">2 rem a gyökér alapján (16 képpont)</p>
</div>

.div-one {
 betűméret: 40 képpont;
}
.egy-em {
 betűméret: 1em;
}
.két-em {
 betűméret: 2em;
}
.egy-rem {
 betűméret: 1 rem;
}
.két-rem {
 betűméret: 2rem;
}

Kimenet

Amint láthatja, a REM egységekkel definiált bekezdéseket teljesen nem zavarja a tárolónkban megadott betűméret, és szigorúan a a HTML elemválasztóban meghatározott gyökér betűméret.

Px vs. Em vs. Rem: Melyik egység a legjobb?

Az Em használata nem ajánlott, mivel a beágyazott elemek összetett hierarchiája lehetséges. A REM általában megfelelően méreteződik a böngésző beállításaiban megadott új alapértelmezett/alap betűmérettel a PX helyett. Ez megmagyarázza, miért érdemes REM-et használni, amikor szöveges tartalommal dolgozik weboldalain. A REM megnyeri a versenyt. A tartalom jobb stílusa és méretezése a REM-mel, amely ékességet kölcsönöz webhelyének, mivel ideális webhely-készítők számára. A tartalom pontos mérése határozza meg webhelye megjelenését és hangulatát, azonban kreatívnak kell lennie.