Px vs. Em vs. Rem: Kterou CSS jednotku byste měli použít?

Naučíte se několik jednotek CSS pro přizpůsobení velikosti písma textu při vytváření webových stránek. Existuje mnoho jednotek, jako je pt, pc, ex atd., ale ve většině případů byste se měli zaměřit na tři nejoblíbenější jednotky: px, em a rem. Mnoho vývojářů obvykle nechápe, jaké jsou rozdíly mezi těmito jednotkami; takže níže je podrobné vysvětlení těchto jednotek.

Než budete pokračovat, všimněte si, že existují dva typy délek jednotek: absolutní a relativní.

Absolutní délky

Jednotky absolutní délky jsou pevné a délka vyjádřená v kterékoli z nich se zobrazí jako přesně tato velikost.

Jednotky absolutní délky se nedoporučují pro použití na obrazovce, protože velikosti obrazovky se velmi liší. Lze je však použít, pokud je známo výstupní médium, například pro tištěné rozvržení.

Relativní délky

Relativní jednotky délky určují délku vzhledem k jiné vlastnosti délky. Jednotky relativní délky se lépe škálují mezi různými vykreslovacími médii.

1. Px (Pixel)

Pixel je pravděpodobně nejpoužívanější jednotkou v CSS a je velmi oblíbený, pokud jde o nastavení velikosti písma textu na webových stránkách. Jeden pixel (1 pixel) je v tištěných médiích definován jako 1/96 palce.

Na obrazovkách počítačů však obvykle nesouvisí se skutečnými rozměry, jako jsou centimetry a palce, jak si možná myslíte; jsou pouze definovány jako malé, ale viditelné. Co je považováno za viditelné, závisí na zařízení.

Různá zařízení mají na svých obrazovkách různý počet pixelů na palec, což je známé jako hustota pixelů. Pokud byste k určení velikosti obsahu na tomto zařízení použili počet fyzických pixelů na obrazovce zařízení, měli byste problém, aby věci vypadaly stejně na obrazovkách všech velikostí.

Zde přichází na řadu poměr pixelů zařízení. Je to v podstatě jen způsob, jak vypočítat, kolik místa zabere pixel CSS (1 pixel) na obrazovce zařízení, což umožní, aby vypadal stejně velký ve srovnání s jiným zařízením.

Níže je příklad: -

<třída div="kontejner">
<div>
<h1>Toto je odstavec</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>

.kontejner {
 šířka: 100 %;
 výška: 100vh;
 displej: flex;
 justify-content: center;
 align-items: center;
}
.kontejnerdiv {
 max-width: 500px;
 odsazení: 5px 20px;
 ohraničení: 1px šedá plná;
 border-radius: 10px;
}
p {
 velikost písma: 16px;
}

výstup

Horní pole vypadá, když je zobrazeno na větší obrazovce, jako je notebook, a spodní pole je, jak to vypadá při zobrazení na menší obrazovce, jako je telefon.

Všimněte si, že text v obou polích má stejnou velikost, v podstatě tak funguje pixel. Pomáhá tomu, aby webový obsah (nejen text) vypadal na různých zařízeních stejně.

2. Em (M)

Jednotka em dostala svůj název podle velkého písmene 'M' (em), protože většina jednotek CSS pochází z typografie. Jako základ používá aktuální velikost písma nadřazeného prvku. Lze jej použít ke zvětšení nebo zmenšení velikosti písma prvku na základě velikosti písma zděděné od rodiče.

Řekněme, že máte nadřazený div, který má velikost písma 16px. Pokud v tomto div vytvoříte prvek odstavce a dáte mu velikost písma 1 em, velikost písma odstavce bude 16 pixelů.

Pokud však dáte jinému odstavci velikost písma 2em, převede se to na 32px. Zvažte příklad níže:

<třída div="div-jedna">
<p třída="jeden-em">1 em na základě 10 pixelů</str>
<p třída="dva-em">2 em na základě 10px</str>
</div>
<třída div="div-dva">
<p třída="jeden-em">1 em na základě 10 pixelů</str>
<p třída="dva-em">2 em na základě 10px</str>
</div>
</div>

.div-one {
 velikost písma: 15px;
}
.div-dva {
 velikost písma: 20px;
}
.jeden-em {
 velikost písma: 1 em;
}
.dva-em {
 velikost písma: 2em;
}

výstup

Můžete vidět, jak em může zvětšit velikost textu a jak to ovlivňuje aktuální velikost písma zděděná z nadřazeného kontejneru. Není vhodné je používat, zvláště na složitě strukturovaných stránkách.

Pokud se nepoužívá správně, můžete narazit na problémy se škálováním, kdy prvky nemusí mít správnou velikost na základě složitého dědění velikostí ve stromu DOM.

3. Rem (Root Em)

Rem funguje téměř stejně jako em, ale hlavní rozdíl je v tom, že rem odkazuje pouze na velikost písma kořenového prvku na stránce, nikoli na velikost písma rodiče. Kořenová velikost písma je výchozí velikost písma určená buď uživatelem v nastavení prohlížeče, nebo vámi, vývojářem.

Výchozí velikost písma webového prohlížeče je obvykle 16px, takže 1rem bude 16px a 2rem bude 32px. Nicméně v případě, kdy se velikost kořenového písma změní například na 10px; 1rem bude mít 10px a 2rem bude 20px.

Zde je příklad, aby bylo vše jasnější:

<třída div="div-jedna">
<!-- EM -->
<p třída="jeden-em">1 em na základě kontejneru (40px)</str>
<p třída="dva-em">2 em na základě kontejneru (40px)</str>
<!-- REM -->
<p třída="one-rem">1 rem na základě root (16px)</str>
<p třída="dvou-rem">2 rem na základě root (16px)</str>
</div>

.div-one {
 velikost písma: 40px;
}
.jeden-em {
 velikost písma: 1 em;
}
.dva-em {
 velikost písma: 2em;
}
.one-rem {
 velikost písma: 1rem;
}
.dvou-rem {
 velikost písma: 2rem;
}

výstup

Jak můžete vidět, odstavce definované pomocí jednotek REM nejsou zcela rušeny velikostí písma deklarovanou v našem kontejneru a jsou přísně vykresleny vzhledem k velikost kořenového písma definovaná v selektoru elementu HTML.

Px vs. Em vs. Rem: Která jednotka je nejlepší?

Em se nedoporučuje kvůli možnosti mít složitou hierarchii vnořených prvků. REM je obvykle vhodně škálováno s novou výchozí/základní velikostí písma zadanou v nastavení prohlížeče na rozdíl od PX. To vysvětluje, proč byste při práci s textovým obsahem na svých webových stránkách měli používat REM. REM vyhrává závod. Lepší styling a škálování obsahu pomocí REM dodají vašemu webu šmrnc, protože je ideální pro tvůrce webových stránek. Přesná měření vašeho obsahu budou určovat vzhled vašeho webu, ale budete muset být kreativní.