Qual è la differenza tra rem e em?
sobes.tech AI
Risposta dell'AI
rem e em sono unità di misura relative in CSS, utilizzate per definire le dimensioni, ma differiscono per la base di riferimento.
-
em — un'unità relativa basata sulla dimensione del font dell'elemento genitore. Ad esempio, se la dimensione del font del genitore è: 16px, allora 1em = 16px. Se in un elemento figlio la dimensione del font è: 1.5em, la sua dimensione sarà di 24px.
-
rem — un'unità relativa basata sulla dimensione del font dell'elemento radice (solitamente
<html>). Ad esempio, se<html>ha una dimensione del font: 16px, allora 1rem è sempre uguale a 16px, indipendentemente dall'annidamento.
Differenza principale:
- em dipende dal contesto (dall'elemento genitore), il che può portare a una cascata nella moltiplicazione delle dimensioni in caso di annidamento.
- rem è sempre fisso rispetto alla radice, il che semplifica la gestione delle dimensioni e le rende più prevedibili.
Esempio:
html {
font-size: 16px;
}
.parent {
font-size: 20px; /* 1em = 20px all'interno di .parent */
}
.child-em {
font-size: 1.5em; /* 1.5 * 20px = 30px */
}
.child-rem {
font-size: 1.5rem; /* 1.5 * 16px = 24px */
}
Usa rem per le dimensioni globali per evitare cambiamenti imprevisti, e em quando hai bisogno di scalare rispetto al contesto locale.