Projektowanie nowoczesnych, dostępnych stron internetowych wymaga rezygnacji ze sztywnych wartości wyrażonych w pikselach. Aby witryna płynnie reagowała na ustawienia użytkownika i ekrany różnych urządzeń, kluczowe jest opanowanie relatywnych jednostek miary: em i rem.
Jednostki em i rem to względne jednostki miary w CSS, które pozwalają na elastyczne i responsywne projektowanie. Oto przewodnik, jak ich używać:
Kluczowe wnioski
rem(Root EM) odnosi się zawsze do bazowego rozmiaru czcionki elementu głównego dokumentu (najczęściej znacznika<html>).emjest jednostką relatywną względem rozmiaru czcionki swojego bezpośredniego elementu nadrzędnego (rodzica).- Najlepszą praktyką jest stosowanie
remdo globalnej typografii i układów, natomiastemdo elementów, które powinny skalować się proporcjonalnie do tekstu (np. paddingi w przyciskach). - Korzystanie z jednostek relatywnych jest fundamentem dostępności (accessibility), ponieważ szanuje ustawienia wielkości tekstu wybrane przez użytkownika w przeglądarce.
Jak działa jednostka rem (Root EM)?
Jednostka rem jest niezwykle przewidywalna i bezpieczna w użyciu. Jej wartość jest obliczana na podstawie wielkości czcionki zdefiniowanej dla roota (czyli elementu <html>). Domyślnie większość współczesnych przeglądarek internetowych ustawia bazowy rozmiar tekstu na 16px.
Oznacza to, że w standardowej konfiguracji:
- 1rem = 16px
- 2rem = 32px
- 0.5rem = 8px
Jeśli użytkownik zmieni domyślny rozmiar czcionki w ustawieniach swojej przeglądarki na np. 20px (z powodu wad wzroku), wszystkie elementy ostylowane za pomocą rem automatycznie i proporcjonalnie ulegną powiększeniu. Dzięki temu zachowujemy pełną kontrolę nad proporcjami layoutu, dbając jednocześnie o zasady dostępności cyfrowej.
Jak działa jednostka em i problem dziedziczenia
Jednostka em różni się od rem tym, że punktem odniesienia nie jest root dokumentu, lecz wielkość czcionki (font-size) rodzica danego elementu. Jeśli element nie ma zdefiniowanej wielkości czcionki u rodzica, szuka jej wyżej w drzewie DOM, aż dotrze do elementu głównego.
Głównym wyzwaniem przy pracy z em jest efekt kaskadowości i kumulacji (compounding efekt). Spójrzmy na poniższe porównanie zachowania obu jednostek w zagnieżdżonych strukturach kodu.
| Poziom zagnieżdżenia listy | Wynik dla jednostki rem (baza: 16px, kod: 1.5rem) | Wynik dla jednostki em (baza: 16px, kod: 1.5em) |
|---|---|---|
| Poziom 1 (Rodzic) | 1.5 \times 16px = 24px | 1.5 \times 16px = 24px |
| Poziom 2 (Dziecko) | 1.5 \times 16px = 24px | 1.5 \times 24px = 36px |
| Poziom 3 (Wnuk) | 1.5 \times 16px = 24px | 1.5 \times 36px = 54px |
Jak widać w tabeli, użycie em na zagnieżdżonych listach powoduje, że każdy kolejny element staje się coraz większy, ponieważ mnoży wartość swojego bezpośredniego przedmówcy. Z tego powodu bezkrytyczne stosowanie em do wielkości fontów może prowadzić do trudnych w debugowaniu błędów wizualnych.
Kiedy stosować rem, a kiedy em? Praktyczne reguły
W nowoczesnym Web Developmencie wypracowano jasny podział ról dla obu tych jednostek, który pozwala unikać problemów z niekontrolowanym skalowaniem:
- Używaj
remdo: wielkości czcionek akapitów, nagłówków (h1,h2), szerokości i wysokości głównych kontenerów na stronie, marginesów sekcji oraz ogólnego gridu witryny. Zapewni to spójność i stabilność całego szablonu. - Używaj
emdo: właściwości takich jakpadding,margin,border-radiusczywidth/heightkomponentów, które mają bezpośrednio zależeć od rozmiaru tekstu wewnątrz nich.
Klasycznym przykładem użycia em jest przycisk (button). Jeśli zdefiniujemy paddingi przycisku jako padding: 0.5em 1em;, a następnie w mediach społecznościowych lub w innej sekcji zmienimy tylko jego font-size, wewnętrzne odstępy przycisku przeskalują się automatycznie, zachowując idealne proporcje estetyczne bez konieczności nadpisywania paddingów.
Jednostka em - przykład
- Definicja:
emto jednostka względna, która jest obliczana na podstawie rozmiaru czcionki elementu rodzica. - Wzór: 1
em= rozmiar czcionki elementu rodzica. - Przykład
css:body{ font-size: 16px; /* Domyślny rozmiar czcionki */ } p { font-size: 1.2em; /* 16px * 1.2 = 19.2px */ }Jednostka rem - przykład
- Definicja:
remto jednostka względna, która jest obliczana na podstawie rozmiaru czcionki elementuroot(najczęściej<html>). - Wzór: 1
rem= rozmiar czcionki elementuroot. - Przykład:
css:html { font-size: 16px; /* Domyślny rozmiar czcionki dla całej strony */ } body { font-size: 1rem; /* 16px */ }Różnice między em a rem
em:- Względne do elementu rodzica.
- Może prowadzić do nieoczekiwanych wyników w drzewie DOM.
- Często używane do rozmiarów czcionek i odstępów.
rem:- Względne do elementu
root. - Bardziej przewidywalne i łatwiejsze do zarządzania.
- Dobrze nadaje się do definiowania wartości bazowych (np. rozmiaru czcionki, odstępów).
- Względne do elementu
Przykłady użycia
Przykład 1: Rozmiar czcionki
css
/* Definicja bazowa */
html {
font-size: 16px;
}
/* Użycie `rem` */
body {
font-size: 1.5rem; /* 16px * 1.5 = 24px */
}
/* Użycie `em` */
p {
font-size: 0.9em; /* 24px * 0.9 = 21.6px */
}
Przykład 2: Odstępy
css
/* Definicja bazowa */
html {
font-size: 16px;
}
/* Użycie `rem` */
.button {
padding: 1rem 2rem; /* 16px i 32px */
}
/* Użycie `em` */
.container {
padding: 0.5em 1em; /* Zależne od rozmiaru czcionki elementu rodzica */
}
Najlepsze praktyki
- Używaj
remdla wartości bazowych: Definiuj rozmiary czcionek, odstępy i inne wartości bazowe wrem, aby zapewnić spójność i łatwość skalowania. - Używaj
emdla zagnieżdżonych elementów: Używajemdla elementów zagnieżdżonych, gdzie rozmiar powinien być względny do elementu rodzica (np. czcionki w nagłówkach). - Unikaj mieszania
emirem: Staraj się używać jednej jednostki względnej w danym kontekście, aby uniknąć nieoczekiwanych wyników.
Wsparcie przeglądarek
emiremsą wspierane we wszystkich nowoczesnych przeglądarkach.- Nie ma potrzeby dodawania prefiksów
-webkit-,-moz-itp.
FAQ – Najczęściej zadawane pytania
Nie, piksele wciąż doskonale sprawdzają się przy definiowaniu bardzo cienkich obramowań (np. border: 1px solid #ccc) lub w miejscach, gdzie obiekt absolutnie nigdy nie powinien zmieniać swoich wymiarów.
To technika ułatwiająca obliczenia. Skoro domyślne 100% = 16px, to 62.5% = 10px. Dzięki temu programista pisząc 1.4rem uzyskuje dokładnie 14px, a pisząc 2.5rem otrzymuje 25px, zachowując elastyczność jednostek relatywnych.
Nie, sposób interpretacji jednostek miary przez przeglądarkę odbywa się błyskawicznie na etapie renderowania stylów i nie wpływa mierzalnie na wydajność witryny.
Podsumowanie
Zrozumienie i sprawne operowanie jednostkami em i rem to klucz do tworzenia profesjonalnych, responsywnych oraz dostępnych interfejsów użytkownika. Łącząc przewidywalność globalnego rem z lokalną elastycznością i plastycznością em, deweloperzy mogą pisać znacznie krótszy, bardziej elegancki i łatwiejszy w utrzymaniu kod CSS, który dopasuje się do potrzeb każdego użytkownika.
