Was ist der Unterschied zwischen rem und em in CSS?

Unterscheidung von rem und em in CSS

In CSS können Schriftgrößen mithilfe verschiedener Einheiten definiert werden, unter denen rem und em häufig anzutreffen sind . Obwohl beide Einheiten dazu dienen, relative Schriftgrößen festzulegen, unterscheiden sie sich in einem entscheidenden Aspekt: ​​ihrem relativen Bezugspunkt.

Em verstehen

Die Einheit em ist relativ zu die Schriftgröße des übergeordneten Elements. Das heißt, wenn das übergeordnete Element eine Schriftgröße von 14 Pixel hat, hat das untergeordnete Element mit einer Schriftgröße von 1,4 em eine Schriftgröße von 1,4 * 14 Pixel = 19,6 Pixel.

Rem verstehen

Im Gegensatz dazu ist die rem-Einheit relativ zu einer Basisschriftgröße. Diese Basisschriftgröße wird normalerweise im festgelegt. Element oder über eine CSS-Variable. Wenn die Basisschriftgröße auf 16 Pixel eingestellt ist, werden alle REM-Werte relativ zu dieser Größe berechnet. Daher hat das untergeordnete Element mit einer Schriftgröße von 1,4rem in unserem Beispiel eine Schriftgröße von 1,4 * 16px = 22,4px.

Auswirkungen auf verschachtelte Elemente

Diese Unterscheidung wird wichtig, wenn es um verschachtelte Container geht, deren Schriftgröße sich ändert. In ems definierte untergeordnete Elemente erben die geänderte Schriftgröße von ihren übergeordneten Elementen, während in rems definierte Elemente ihre relative Größe zur Basisschriftgröße beibehalten.

Beispiel

Im bereitgestellten Codeausschnitt:

<code class="html"><div>Hello <p>World</p></div></code>

<code class="css">div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}</code>

Die Schriftgröße des