Px vs. Em vs. Rem: Ktorú CSS jednotku by ste mali použiť?

Naučíte sa niekoľko jednotiek CSS na prispôsobenie veľkosti písma textu pri vytváraní webových stránok. Existuje veľa jednotiek ako pt, pc, ex atď., ale vo väčšine prípadov by ste sa mali zamerať na tri najobľúbenejšie jednotky: px, em a rem. Mnoho vývojárov zvyčajne nechápe, aké sú rozdiely medzi týmito jednotkami; takže nižšie je podrobné vysvetlenie týchto jednotiek.

Pred pokračovaním si všimnite, že existujú dva typy dĺžok jednotiek: absolútne a príbuzný.

Absolútne dĺžky

Jednotky absolútnej dĺžky sú pevné a dĺžka vyjadrená v ktorejkoľvek z nich sa bude javiť ako presne táto veľkosť.

Jednotky absolútnej dĺžky sa neodporúčajú používať na obrazovke, pretože veľkosti obrazovky sa veľmi líšia. Môžu sa však použiť, ak je známe výstupné médium, napríklad pre vytlačený návrh.

Relatívne dĺžky

Jednotky relatívnej dĺžky určujú dĺžku vzhľadom na inú vlastnosť dĺžky. Jednotky relatívnej dĺžky sa lepšie škálujú medzi rôznymi vykresľovacími médiami.

1. px (pixel)

Pixel je pravdepodobne najpoužívanejšou jednotkou v CSS a je veľmi populárny, pokiaľ ide o nastavenie veľkosti písma textu na webových stránkach. Jeden pixel (1 pixel) je v tlačových médiách definovaný ako 1/96 palca.

Na obrazovkách počítačov však zvyčajne nesúvisia so skutočnými mierami, ako sú centimetre a palce, ako si možno myslíte; sú definované ako malé, ale viditeľné. Čo sa považuje za viditeľné, závisí od zariadenia.

Rôzne zariadenia majú na svojich obrazovkách rôzny počet pixelov na palec, čo je známe ako hustota pixelov. Ak by ste na určenie veľkosti obsahu na tomto zariadení použili počet fyzických pixelov na obrazovke zariadenia, mali by ste problém, aby veci vyzerali rovnako na obrazovkách všetkých veľkostí.

Tu prichádza na rad pomer pixelov zariadenia. Je to v podstate len spôsob, ako vypočítať, koľko miesta zaberie pixel CSS (1 pixel) na obrazovke zariadenia, čo mu umožní vyzerať rovnako veľké v porovnaní s iným zariadením.

Nižšie je uvedený príklad: -

<trieda div="kontajner">
<div>
<h1>Toto je odsek</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 elita. Hic quam beatae voluptatibus
 amet possimus iure impedit Claimnda Differentio aliquid debitis, autem
 vel ullam aut, quod corporis ratione atque ducimus dolorum.
</str>
</div>
</div>

.kontajner {
 šírka: 100 %;
 výška: 100vh;
 displej: flex;
 zdôvodniť-obsah: stred;
 align-items: center;
}
.kontajnerdiv {
 max-width: 500px;
 padding: 5px 20px;
 orámovanie: 1px šedá plná;
 border-radius: 10px;
}
p {
 veľkosť písma: 16px;
}

výkon

Horné pole vyzerá, keď je zobrazené na väčšej obrazovke, napríklad prenosný počítač, a spodné pole je, ako to vyzerá pri zobrazení na menšej obrazovke, napríklad na telefóne.

Všimnite si, že text v oboch poliach má rovnakú veľkosť. V podstate tak funguje pixel. Pomáha webovému obsahu (nielen textu) vyzerať rovnako veľké na všetkých zariadeniach.

2. Em (M)

Jednotka em dostala svoj názov podľa veľkého písmena „M“ (em), keďže väčšina jednotiek CSS pochádza z typografie. Ako základ používa aktuálnu veľkosť písma nadradeného prvku. Môže sa použiť na zväčšenie alebo zmenšenie veľkosti písma prvku na základe veľkosti písma zdedenej od rodiča.

Povedzme, že máte nadradený div, ktorý má veľkosť písma 16px. Ak vytvoríte prvok odseku v tomto prvku div a priradíte mu veľkosť písma 1 em, veľkosť písma odseku bude 16 pixelov.

Ak však dáte ďalšiemu odseku veľkosť písma 2em, preloží sa to na 32px. Zvážte príklad nižšie:

<trieda div="div-one">
<p trieda="jeden-em">1 em na základe 10 pixelov</str>
<p trieda="dva-em">2 em na základe 10 pixelov</str>
</div>
<trieda div="div-dva">
<p trieda="jeden-em">1 em na základe 10 pixelov</str>
<p trieda="dva-em">2 em na základe 10 pixelov</str>
</div>
</div>

.div-one {
 veľkosť písma: 15px;
}
.div-dva {
 veľkosť písma: 20px;
}
.jeden-em {
 veľkosť písma: 1 em;
}
.dva-em {
 veľkosť písma: 2em;
}

výkon

Môžete vidieť, ako môže em zväčšiť veľkosť textu a ako to ovplyvňuje aktuálna veľkosť písma zdedená z nadradeného kontajnera. Neodporúča sa ich používať, najmä v rámci zložitých štruktúrovaných stránok.

Ak sa nepoužije správne, môžete naraziť na problémy so škálovaním, keď prvky nemusia mať správnu veľkosť na základe komplexného dedenia veľkostí v strome DOM.

3. Rem (root Em)

Rem funguje takmer rovnako ako em, ale hlavný rozdiel je v tom, že rem odkazuje iba na veľkosť písma koreňového prvku na stránke a nie na veľkosť písma rodiča. Koreňová veľkosť písma je predvolená veľkosť písma určená používateľom v nastaveniach prehliadača alebo vami, vývojárom.

Predvolená veľkosť písma webového prehliadača je zvyčajne 16px, takže 1rem bude 16px a 2rem bude 32px. Avšak v prípade, keď sa veľkosť koreňového písma zmení napríklad na 10px; 1rem bude mať 10px a 2rem bude 20px.

Tu je príklad, aby to bolo jasnejšie:

<trieda div="div-one">
<!-- EM -->
<p trieda="jeden-em">1 em na základe kontajnera (40px)</str>
<p trieda="dva-em">2 em na základe kontajnera (40px)</str>
<!-- REM -->
<p trieda="one-rem">1 rem na základe root (16px)</str>
<p trieda="dvoj-rem">2 rem na základe root (16px)</str>
</div>

.div-one {
 veľkosť písma: 40px;
}
.jeden-em {
 veľkosť písma: 1 em;
}
.dva-em {
 veľkosť písma: 2em;
}
.one-rem {
 veľkosť písma: 1rem;
}
.dvoj-rem {
 veľkosť písma: 2rem;
}

výkon

Ako vidíte, odseky definované s jednotkami REM sú úplne nenarušené veľkosťou písma deklarovanou v našom kontajneri a sú striktne vykreslené vzhľadom na veľkosť koreňového písma definovaná v selektore elementov HTML.

Px vs. Em vs. Rem: Ktorá jednotka je najlepšia?

Em sa neodporúča kvôli možnosti mať zložitú hierarchiu vnorených prvkov. REM je zvyčajne primerane škálované s novou predvolenou/základnou veľkosťou písma špecifikovanou v nastaveniach prehliadača na rozdiel od PX. To vysvetľuje, prečo by ste mali používať REM pri práci s textovým obsahom na vašich webových stránkach. REM vyhráva preteky. Lepší štýl a škálovanie vášho obsahu pomocou REM dodajú vášmu webu šmrnc, pretože je ideálny pre tvorcov webových stránok. Presné merania vášho obsahu budú diktovať vzhľad a dojem z vašej webovej stránky, budete však musieť byť kreatívni.