Detaillierte Erklärung der Verwendung von px, em und rem in CSS

Ich glaube, dass jeder Front-End-Ingenieur diese Erfahrung hat. Die meisten inländischen Designer verwenden gerne px, während die meisten ausländischen Websites gerne em und rem verwenden. Was ist also der Unterschied zwischen den dreien und was sind die Vor- und Nachteile? jede? ? Im folgenden Artikel gibt Ihnen der Herausgeber eine detaillierte Einführung in die Unterschiede zwischen px, em und rem in CSS. Lassen Sie uns gemeinsam einen Blick darauf werfen.

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 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 lediglich, weil erbt. 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 em-Einheiten verwendet werden

Die em-Einheit hängt von einem font-size-Wert 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 em-Werte verwenden, um den Abstand, den Rand, die Zeilenhöhe usw. des Menüs Navigation festzulegen Artikel. 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.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie CSS mit dem Standardstil des Browsers umgeht

CSS implementiert einen sichtbaren Fortschrittsbalken mit Pfeilprozess

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der Verwendung von px, em und rem in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!