Was ist der Unterschied zwischen rem und em?
sobes.tech KI
Antwort von AI
rem und em sind relative Maßeinheiten in CSS, die zur Festlegung von Größen verwendet werden, sich aber in der Bezugsebene unterscheiden.
-
em — eine relative Einheit, die auf der Schriftgröße des Elternelements basiert. Zum Beispiel, wenn die Schriftgröße des Elternteils: 16px ist, dann ist 1em = 16px. Wenn in einem Kindelement die Schriftgröße: 1.5em ist, beträgt seine Größe 24px.
-
rem — eine relative Einheit, die auf der Schriftgröße des Wurzelelements (meist
<html>) basiert. Zum Beispiel, wenn<html>eine Schriftgröße von 16px hat, ist 1rem immer gleich 16px, unabhängig von der Verschachtelung.
Hauptunterschied:
- em hängt vom Kontext (vom Elternelement) ab, was zu einer Kaskadierung der Größen bei Verschachtelung führen kann.
- rem ist immer fix relativ zum Root, was die Größenverwaltung vereinfacht und vorhersagbarer macht.
Beispiel:
html {
font-size: 16px;
}
.parent {
font-size: 20px; /* 1em = 20px innerhalb von .parent */
}
.child-em {
font-size: 1.5em; /* 1.5 * 20px = 30px */
}
.child-rem {
font-size: 1.5rem; /* 1.5 * 16px = 24px */
}
Verwenden Sie rem für globale Größen, um unerwartete Änderungen zu vermeiden, und em, wenn Sie relativ zum lokalen Kontext skalieren möchten.