Der Unterschied zwischen px, em und rem in CSS

Vorwort

em und rem sind flexible und skalierbare Einheiten, die vom Browser abhängig von der Schriftgröße im Design in Pixelwerte umgewandelt werden, wenn der Wert 1em verwendet wird Oder 1rem, das vom Browser von 16px auf 160px oder jeden anderen Wert konvertiert werden kann. Browser verwenden 1px, sodass 1px immer als genau 1px angezeigt wird.

Die Ähnlichkeiten zwischen em und rem

Die Verwendung von em- und rem-Einheiten kann unser Design flexibler machen und die Gesamtskalierung von Elementen anstelle fester Größen steuern

Der Unterschied zwischen em und rem

Der Unterschied besteht darin, wen der Browser in px-Werte umwandelt

Wie die rem-Einheit in Pixelwerte umgewandelt wird

Bei Verwendung von rem-Einheiten hängt deren Umrechnung in Pixelgröße von der Schriftgröße des Seitenstammelements, also der Schriftgröße des HTML-Elements, ab. Die Schriftgröße des Stammelements wird mit Ihrem rem-Wert multipliziert.

Zum Beispiel würde ein Stammelement mit einer Schriftgröße von 16 Pixel, 10rem, 160 Pixel entsprechen, also 10 x 16 = 160.

Wie em-Einheiten in Pixelwerte umgewandelt werden

Bei Verwendung von em-Einheiten ist der Pixelwert der em-Wert multipliziert mit der Schriftgröße des verwendeten Elements em-Einheiten. Wenn ein p beispielsweise eine Schriftgröße von 18 Pixel hat, entspricht 10em 180 Pixel, also 10 × 18 = 180.

Wichtige Punkte, die es zu verstehen gilt:

Es gibt ein weit verbreitetes Missverständnis, dass die Geviert-Einheit die Schriftgröße relativ zum übergeordneten Element ist. Tatsächlich sind sie gemäß dem W3-Standard relativ zur Schriftgröße des Elements unter Verwendung von Em-Einheiten. Die Schriftgröße des übergeordneten Elements kann sich auf den em-Wert auswirken, dies geschieht jedoch ausschließlich aufgrund der Vererbung. Mal sehen, warum und wie es funktioniert.

Was Sie wissen müssen:

Das Root-HTML-Element erbt die im Browser festgelegte Schriftgröße, es sei denn, es wird explizit ein fester Wert festgelegt, um diese zu überschreiben. Obwohl also die Schriftgröße des HTML-Elements direkt durch den rem-Wert bestimmt wird, kann die Schriftgröße zunächst aus den Browsereinstellungen stammen. Daher kann sich die Einstellung der Schriftgröße des Browsers auf jeden Wert auswirken, der rem-Einheiten verwendet, und auf jeden Wert, der über em-Einheiten geerbt wird.

Zusammenfassung der Unterschiede zu rem em

Alles oben Genannte läuft auf Folgendes hinaus:

1. rem-Einheiten in Pixelwerte übersetzt ​​werden durch HTML-Elemente dargestellt. Bestimmt durch die Schriftgröße. Diese Schriftgröße wird durch die Schriftgrößeneinstellung im Browser beeinflusst, es sei denn, eine bestimmte Einheit wird explizit überschrieben.
   

2. em-Einheiten werden abhängig von der verwendeten Schriftgröße in Pixelwerte umgewandelt. Diese Schriftgröße wird durch die vom übergeordneten Element geerbte Schriftgröße bestimmt, sofern sie nicht explizit mit einer bestimmten Einheit überschrieben wird.
   

Warum Rem-Einheiten verwendet werden:

Rem-Einheiten bieten die größte Leistung, und das nicht nur, weil sie eher eine einheitliche Größe als eine Vererbung bieten . Stattdessen gibt es uns die Möglichkeit, Benutzerpräferenzen zu ermitteln und die Größe von Elementen zu beeinflussen, indem wir überall auf der Website rem verwenden, anstatt feste px-Einheiten zu verwenden.
Aus diesem Grund sollte der Hauptzweck der Verwendung von rem-Einheiten darin bestehen, sicherzustellen, dass unsere Layouts auf die richtige Größe angepasst werden, unabhängig davon, wie Benutzer ihre Browser einrichten.

Warum die em-Einheit verwenden?

Die em-Einheit hängt von einem Schriftgrößenwert und nicht von der Schriftgröße des HTML-Elements ab.

Zu diesem Zweck sollte der Hauptzweck der EM-Einheit darin bestehen, eine Erweiterbarkeit zu ermöglichen, die im Rahmen eines bestimmten Designelements bleibt.

Zum Beispiel können Sie den em-Wert verwenden, um den Abstand, den Rand, die Zeilenhöhe und andere Werte des Navigationsmenüelements festzulegen. Menü mit Schriftgröße 0,9rem

Wenn Sie auf diese Weise die Schriftgröße des Menüs ändern, wird der Abstand um die Menüelemente proportional im verbleibenden Raum skaliert.

Zusammenfassung

Die rem- und em-Einheiten sind Pixelwerte, die vom Browser basierend auf der Schriftgröße in Ihrem Design berechnet werden.

em-Einheiten basieren auf der Schriftgröße des Elements, das sie verwendet.

REM-Einheiten basieren auf der Schriftgröße des HTML-Elements.

EM-Einheiten können von der geerbten Schriftgröße des übergeordneten Elements betroffen sein.

REM-Einheiten können Schriftgrößen aus den Browser-Schrifteinstellungen erben.

Die Verwendung von em-Einheiten sollte auf der Schriftgröße der Komponente und nicht auf der Schriftgröße des Stammelements basieren.

Verwenden Sie rem, wenn Sie keine em-Einheiten benötigen und die Skalierung entsprechend der Schriftgröße des Browsers festlegen müssen.

Verwenden Sie rem-Einheiten, es sei denn, Sie sind sicher, dass Sie em-Einheiten benötigen, auch für Schriftgrößen.

Verwenden Sie rem-Einheiten in Medienabfragen

Verwenden Sie em oder rem nicht in mehrspaltigen Layouts – verwenden Sie stattdessen %.

Verwenden Sie em oder rem nicht, wenn die Skalierung unweigerlich dazu führt, dass Layoutelemente beschädigt werden.

Weitere Artikel zu den Unterschieden zwischen px, em und rem in CSS finden Sie auf der chinesischen PHP-Website!