Px vs. Em vs. Rem: Której jednostki CSS powinieneś użyć?

Nauczysz się kilku jednostek CSS do dostosowywania rozmiaru czcionki tekstu podczas tworzenia stron internetowych. Istnieje wiele jednostek, takich jak pt, pc, ex itp., ale w większości przypadków powinieneś skupić się na trzech najpopularniejszych jednostkach: px, em i rem. Wielu programistów zwykle nie rozumie, jakie są różnice między tymi jednostkami; więc poniżej znajduje się szczegółowe wyjaśnienie tych jednostek.

Zanim przejdziesz dalej, zwróć uwagę, że istnieją dwa rodzaje jednostek długości: absolutny I względny.

Długości bezwzględne

Bezwzględne jednostki długości są stałe, a długość wyrażona w dowolnej z nich będzie wyświetlana jako dokładnie ten rozmiar.

Jednostki długości bezwzględnej nie są zalecane do wyświetlania na ekranie, ponieważ rozmiary ekranów bardzo się różnią. Można ich jednak użyć, jeśli nośnik wyjściowy jest znany, na przykład w przypadku drukowanego układu.

Długości względne

Jednostki długości względnej określają długość względem innej właściwości długości. Względne jednostki długości skalują się lepiej między różnymi mediami renderującymi.

1. Px (piksel)

Piksel jest prawdopodobnie najczęściej używaną jednostką w CSS i jest bardzo popularny, jeśli chodzi o ustawianie rozmiaru czcionki tekstu na stronach internetowych. W mediach drukowanych jeden piksel (1 px) jest definiowany jako 1/96 cala.

Jednak na ekranach komputerów zwykle nie są one powiązane z rzeczywistymi pomiarami, takimi jak centymetry i cale, jak mogłoby się wydawać; są po prostu zdefiniowane jako małe, ale widoczne. To, co jest uważane za widoczne, zależy od urządzenia.

Różne urządzenia mają różną liczbę pikseli na cal na swoich ekranach, co jest znane jako gęstość pikseli. Jeśli użyłbyś liczby fizycznych pikseli na ekranie urządzenia do określenia rozmiaru zawartości na tym urządzeniu, miałbyś problem z ujednoliceniem wyglądu na ekranach wszystkich rozmiarów.

Tutaj pojawia się stosunek pikseli urządzenia. Zasadniczo jest to tylko sposób na obliczenie, ile miejsca zajmie piksel CSS (1 piksel) na ekranie urządzenia, dzięki czemu będzie wyglądać tak samo w porównaniu z innym urządzeniem.

Poniżej znajduje się przykład: -

<klasa div="pojemnik">
<dz>
<h1>To jest akapit</h1>
<P>
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
 Reprehenderit incidunt perferendis iure veritatis cupiditate delectus
 wszystko w! 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 przypuszczanda differentio aliquid debitis, autem
 vel ullam aut, quod corporis ratione atque ducimus dolorum.
</P>
</div>
</div>

.pojemnik {
 szerokość: 100%;
 wysokość: 100vh;
 wyświetlacz: elastyczny;
 justify-content: środek;
 elementy wyrównania: środek;
}
.pojemnikdz {
 maksymalna szerokość: 500 pikseli;
 wypełnienie: 5px 20px;
 obramowanie: 1px szary jednolity;
 promień obramowania: 10px;
}
P {
 rozmiar czcionki: 16px;
}

wyjście

Górne pole pokazuje, jak to wygląda, gdy jest wyświetlane na większym ekranie, takim jak laptop, a dolne pole to, jak to wygląda wyświetlane na mniejszym ekranie, takim jak telefon.

Zwróć uwagę, że tekst w obu polach ma ten sam rozmiar. W zasadzie tak działa piksel. Pomaga treściom internetowym (nie tylko tekstowi) wyglądać tak samo na różnych urządzeniach.

2. Em (M)

Jednostka em ma swoją nazwę od wielkiej litery „M” (em), ponieważ większość jednostek CSS pochodzi od typografii. Używa bieżącego rozmiaru czcionki elementu nadrzędnego jako podstawy. Można go użyć do skalowania w górę lub w dół rozmiaru czcionki elementu w oparciu o rozmiar czcionki odziedziczony po rodzicu.

Załóżmy, że masz nadrzędny element div, który ma rozmiar czcionki 16 pikseli. Jeśli utworzysz element akapitu w tym div i nadasz mu rozmiar czcionki 1em, rozmiar czcionki akapitu wyniesie 16 pikseli.

Jeśli jednak podasz inny akapit o rozmiarze czcionki 2em, który przełoży się na 32 piksele. Rozważ poniższy przykład:

<klasa div="div-jeden">
<klasa p="jeden-em">1 em na podstawie 10px</P>
<klasa p="dwa-em">2 em na podstawie 10px</P>
</div>
<klasa div="div-dwa">
<klasa p="jeden-em">1 em na podstawie 10px</P>
<klasa p="dwa-em">2 em na podstawie 10px</P>
</div>
</div>

.div-jeden {
 rozmiar czcionki: 15px;
}
.div-dwa {
 rozmiar czcionki: 20px;
}
.jeden-em {
 rozmiar czcionki: 1em;
}
.dwa-em {
 rozmiar czcionki: 2em;
}

wyjście

Możesz zobaczyć, jak em może skalować rozmiar tekstu i jak wpływa na to bieżący rozmiar czcionki odziedziczony z kontenera nadrzędnego. Nie zaleca się ich używania, zwłaszcza na stronach o złożonej strukturze.

Jeśli nie jest używany prawidłowo, możesz napotkać problemy ze skalowaniem, w których elementy mogą nie mieć odpowiednich rozmiarów w oparciu o złożone dziedziczenie rozmiarów w drzewie DOM.

3. Rem (korzeń Em)

Rem działa prawie tak samo jak em, ale główna różnica polega na tym, że rem odwołuje się tylko do rozmiaru czcionki elementu głównego na stronie, a nie do rozmiaru czcionki elementu nadrzędnego. Główny rozmiar czcionki to domyślny rozmiar czcionki określony przez użytkownika w ustawieniach przeglądarki lub przez Ciebie, programistę.

Domyślny rozmiar czcionki przeglądarki internetowej to zwykle 16px, więc 1rem będzie miał 16px, a 2rem 32px. Jednak w przypadku, gdy główny rozmiar czcionki zostanie zmieniony na przykład na 10 pikseli; 1rem będzie miał 10px, a 2rem będzie miał 20px.

Oto przykład dla wyjaśnienia sprawy:

<klasa div="div-jeden">
<!--EM->
<klasa p="jeden-em">1 em na podstawie kontenera (40px)</P>
<klasa p="dwa-em">2 em na podstawie kontenera (40px)</P>
<!-- REM->
<klasa p="jednoremowy">1 rem w oparciu o root (16px)</P>
<klasa p="dwa-rem">2 rem w oparciu o root (16px)</P>
</div>

.div-jeden {
 rozmiar czcionki: 40 pikseli;
}
.jeden-em {
 rozmiar czcionki: 1em;
}
.dwa-em {
 rozmiar czcionki: 2em;
}
.jeden rem {
 rozmiar czcionki: 1rem;
}
.dwuremowy {
 rozmiar czcionki: 2rem;
}

wyjście

Jak widać, akapity zdefiniowane jednostkami REM są całkowicie niezakłócone rozmiarem czcionki zadeklarowanym w naszym kontenerze i są renderowane ściśle względem główny rozmiar czcionki zdefiniowany w selektorze elementu HTML.

Px vs. Em vs. Rem: Która jednostka jest najlepsza?

Em nie jest zalecane ze względu na możliwość posiadania złożonej hierarchii zagnieżdżonych elementów. REM jest zwykle odpowiednio skalowany z nowym domyślnym/podstawowym rozmiarem czcionki określonym w ustawieniach przeglądarki, w przeciwieństwie do PX. To wyjaśnia, dlaczego powinieneś używać REM podczas pracy z treścią tekstową na swoich stronach internetowych. REM wygrywa wyścig. Lepsza stylizacja i skalowanie treści za pomocą REM dodaje charakteru Twojej witrynie, ponieważ jest idealna dla twórców witryn. Punktowe pomiary treści będą decydować o wyglądzie i stylu Twojej witryny, jednak musisz wykazać się kreatywnością.