Was ist der Hauptunterschied zwischen rem und em in CSS?

CSS: Der Unterschied zwischen Rem und Em

In CSS verwenden Entwickler häufig verschiedene Einheiten, um die Größe von Textelementen zu definieren. Zwei häufig verwendete Einheiten sind rem und em. Obwohl beide Einheiten ähnlich sind, unterscheiden sie sich in entscheidender Weise.

Die Rem-Einheit verstehen

Die Rem-Einheit, kurz für Root Em, ist relativ zur Root-Schriftart Größe der Website. Dies bedeutet, dass die Größe von Elementen, die rem verwenden, unabhängig von Änderungen der Schriftgröße in Zwischencontainern konstant bleibt.

Die Em-Einheit verstehen

Im Gegensatz zu rem ist die Die Einheit em ist relativ zur Schriftgröße des übergeordneten Elements. Wenn sich die Schriftgröße des übergeordneten Elements ändert, wird auch die Größe der Elemente, die em verwenden, entsprechend angepasst.

Demonstration

Im folgenden CSS-Code:

div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}

Dem div-Element wird eine Schriftgröße von 1,4rem zugewiesen, während dem p-Element innerhalb des div ebenfalls eine Schriftgröße von 1,4rem zugewiesen wird. Wenn Sie die Schriftgröße des div-Elements erhöhen würden, würde sich die Schriftgröße des p-Elements nicht ändern, da sie mit rem definiert wird, was relativ zur Stammschriftgröße ist.

Umgekehrt, wenn Sie es tun würden Wenn Sie em anstelle von rem verwenden möchten, erhöht sich auch die Schriftgröße des p-Elements, wenn Sie die Schriftgröße des div-Elements erhöhen. Dies liegt daran, dass em relativ zur Schriftgröße des übergeordneten Elements ist.

Das obige ist der detaillierte Inhalt vonWas ist der Hauptunterschied zwischen rem und em in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!