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ć:
1. Jednostka em
- 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 */ }2. Jednostka rem
- 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 */ }3. 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
4. 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 */
}
5. 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.
6. Wsparcie przeglądarek
emiremsą wspierane we wszystkich nowoczesnych przeglądarkach.- Nie ma potrzeby dodawania prefiksów
-webkit-,-moz-itp.
7. Podsumowanie
emiremto potężne narzędzia do tworzenia elastycznych i responsywnych układów.remjest bardziej przewidywalne i nadaje się do wartości bazowych.emjest względne do elementu rodzica i często używane do czcionek.
Używaj ich mądrze, aby tworzyć strony, które dobrze wyglądają i działają na różnych urządzeniach i rozdzielczościach!
