Middle+

Czym różnią się rem od em?

sobes.tech AI

Odpowiedź od AI

rem i em to jednostki miary względnej w CSS, które służą do określania rozmiarów, ale różnią się bazą odniesienia.

em — jednostka względna oparta na rozmiarze czcionki elementu nadrzędnego. Na przykład, jeśli rozmiar czcionki rodzica to: 16px, to 1em = 16px. Jeśli w elemencie potomnym rozmiar czcionki to: 1.5em, to jego rozmiar będzie wynosił 24px.
rem — jednostka względna oparta na rozmiarze czcionki elementu głównego (zazwyczaj <html>). Na przykład, jeśli <html> ma rozmiar czcionki: 16px, to 1rem zawsze będzie równe 16px, niezależnie od zagnieżdżenia.

Główna różnica:

em zależy od kontekstu (elementu nadrzędnego), co może prowadzić do kaskadowego mnożenia rozmiarów przy zagnieżdżeniu.
rem jest zawsze stałe względem korzenia, co upraszcza zarządzanie rozmiarami i czyni je bardziej przewidywalnymi.

Przykład:

html {
  font-size: 16px;
}

.parent {
  font-size: 20px; /* 1em = 20px wewnątrz .parent */
}

.child-em {
  font-size: 1.5em; /* 1.5 * 20px = 30px */
}

.child-rem {
  font-size: 1.5rem; /* 1.5 * 16px = 24px */
}

Używaj rem dla rozmiarów globalnych, aby uniknąć nieoczekiwanych zmian, a em, gdy chcesz skalować w odniesieniu do lokalnego kontekstu.

Poprzednia Dalej