Czym jest em, a czym rem w CSS?

Kamil Mlonek 11 sierpnia 2021

Szczegółowe objaśnienie działania i wykorzystania jednostek relatywnych em i rem w CSS.

Z pewnością wielu początkujących developerów spotkało się z wartościami em oraz rem. Na pierwszy rzut oka brzmią one dość zagadkowo, jednak nie są niczym innym jak jednostkami miary w CSS. Warto zaznaczyć, że są one relatywne, co oznacza tylko tyle, że bazują na wartości font-size innych elementów.

Czym jest em?

To jednostka bazująca na rozmiarze czcionki określonego elementu lub bezpośredniego rodzica, dla przykładu:


<article>
   <h1>Tytuł artykułu</h1>
   <p>Paragraf artykułu</p>
</article>
 
<style>
   article { font-size: 15px; }
   article h1 { font-size: 3em; }
   article p { font-size: 1em; }
</style>

W powyższym przykładzie przypisujemy znacznikowi article rozmiar czcionki na 15 pikseli, h1 na 3em, a paragrafu na 1em. Co do zasady, tytuł będzie wielkości 45px (3 x 15px), natomiast paragraf przyjmie wartość 15px. Dzieje się tak, ponieważ elementy wewnątrz dziedziczą wartość rodzica.

W ramach ciekawostki warto napomknąć, że wartość em możemy również stosować dla parametru width.

Czym jest rem?

W przeciwieństiwe do em, rem bazuje na najwyższym elemencie w hierarchii drzewa DOM, jednak zasada wyliczania miary jest identyczna. Dla przykładu:


<html>
   ...
   <body>
      <h1>Tytuł strony</h1>
      <p>Paragraf strony</p>
   </body>
</html>
 
<style>
   html { font-size: 15px; }
   h1 { font-size: 3rem; }
   p { font-size: 1rem; } 
</style>

Powyższy kod definiuje wielkość czcionki na 15 pikseli dla całego dokumentu, h1 przyjmuje wartość 3rem (3 x 15px) elementu nadrzędnego, a paragraf 1rem, czyli 15px zgodnie z zasadą dziedziczenia.

Dlaczego warto stosować relatywne jednostki miary?

W czasach, gdzie responsywność stron internetowych to standard, a duży odsetek odwiedzających korzysta właśnie z urządzeń mobilnych, developer ma obowiązek zadbać o poprawne wyświetlanie chociażby właśnie czcionek. O ile w przypadku wykorzystywania niewielkiego rozmiaru fontów wszystko wygląda wporządku, o tyle większe wymiary na smartfonach mogą powodować problemy. Rozwiązaniem tej kwestii jest zmniejszenie ich w zależności od szerokości viewportu. Tutaj przychodzą z pomocą właśnie relatywne jednostki, skracając kod do minimum.

Załóżmy, że używamy pikseli:


<h1>Tytuł strony</h1>
<p>Paragraf strony</p>
 
<style>
   h1 { font-size: 80px; }
   p { font-size: 40px; } 
</style>

Z pewnością, przy tej wielkości czcionek, na urządzeniu mobilnym wystąpi problem z ich poprawnym wyświetlaniem, dlatego musimy je zmniejszyć (o połowę) używając media queries.


@media (max-width: 991.98px) {
   h1 { font-size: 40px; }
   p { font-size: 20px; }
}

Aby nieco skrócić kod, możemy posłużyć się wykorzystaniem rem. Odwzorowanie powyższego przykładu wygląda tak:

 
html { font-size: 40px; }
h1 { font-size: 2rem; }
/* ten zapis nie jest konieczny */
p { font-size: 1rem; }

@media (max-width: 991.98px) {
   html { font-size: 20px; }
}

Dzięki użyciu jednostek relatywnych, uzyskaliśmy prostszy, a w dodatku bardziej “dynamiczny” kod, dzięki któremu każdy element posiadający wartość określoną w rem zmieni swoją wielkość.

Komentarze (0)