Care este diferența dintre rem și em?
sobes.tech AI
Răspuns de la AI
rem și em sunt unități relative de măsură în CSS, utilizate pentru a stabili dimensiuni, dar diferă în baza de referință.
-
em — o unitate relativă bazată pe dimensiunea fontului elementului părinte. De exemplu, dacă dimensiunea fontului părintelui este: 16px, atunci 1em = 16px. Dacă într-un element copil dimensiunea fontului este: 1.5em, atunci dimensiunea sa va fi 24px.
-
rem — o unitate relativă bazată pe dimensiunea fontului elementului rădăcină (de obicei
<html>). De exemplu, dacă<html>are o dimensiune a fontului: 16px, atunci 1rem este întotdeauna egal cu 16px, indiferent de imbricare.
Diferența principală:
- em depinde de context (de elementul părinte), ceea ce poate duce la o multiplicare în cascadă a dimensiunilor în cazul imbricării.
- rem este întotdeauna fix în raport cu rădăcina, ceea ce simplifică gestionarea dimensiunilor și le face mai previzibile.
Exemplu:
html {
font-size: 16px;
}
.parent {
font-size: 20px; /* 1em = 20px în interiorul .parent */
}
.child-em {
font-size: 1.5em; /* 1.5 * 20px = 30px */
}
.child-rem {
font-size: 1.5rem; /* 1.5 * 16px = 24px */
}
Folosiți rem pentru dimensiuni globale pentru a evita schimbări neașteptate, și em când doriți să scalați în raport cu contextul local.