Zusammenfassung der Unterschiede zwischen px, em und rem in CSS

Vorwort

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

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 oder 10 x 16 = 160 entsprechen.

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:

Die größte Leistung, die Rem-Einheiten bieten, liegt nicht nur darin, dass sie eine konsistente Größe und nicht 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 zum verbleibenden Platz 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 Schriftarteinstellungen des Browsers 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 verwenden müssen und die Skalierung entsprechend der Schriftgröße des Browsers einstellen 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.

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