Was ist der Unterschied zwischen rem und px in CSS3?

Der Unterschied zwischen rem und px in CSS3 ist: px ist eine relative Längeneinheit, die relativ zur Bildschirmauflösung ist, während rem ebenfalls eine relative Einheit ist, aber relativ zum HTML-Stammelement.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

Was ist der Unterschied zwischen rem und px in CSS3?

1 ist eine relative Längeneinheit, die sich auf die Bildschirmauflösung bezieht.

Vor- und Nachteile: Es ist relativ stabil und genau, aber die Seite wird beim Zoomen oder Zoomen im Browser chaotisch.

3. rem ist eine neue relative Einheit in CSS3 und ist relativ zum HTML-Stammelement. Wenn Sie rem zum Festlegen der Schriftgröße im Stammelement verwenden, entspricht 1rem zu diesem Zeitpunkt der Standardschriftgröße des Browsers. Die Standardgröße der meisten Browser beträgt 16 Pixel. Man kann sagen, dass diese Einheit die Vorteile der relativen und der absoluten Größe kombiniert Dadurch kann nicht nur die Größe aller Schriftarten proportional angepasst werden, indem das Stammelement geändert wird, sondern auch die Kettenreaktion vermieden werden, bei der die Schriftgrößen Schicht für Schicht zusammengesetzt werden.

Erweiterte Informationen

px:

px ist eigentlich ein Pixel. Wenn Sie PX zum Festlegen der Schriftgröße verwenden, ist es stabiler und genauer.

Bei dieser Methode gibt es jedoch ein Problem. Wenn der Benutzer die von uns im Browser erstellte Webseite durchsucht und der Zoom des Browsers geändert wird, wird das Layout unserer Webseite beschädigt Die Benutzerfreundlichkeit einer Website ist ein großes Problem für Benutzer.

rem:

rem ist eine neue relative Einheit (root em, root em) in CSS3. Wenn Sie rem zum Festlegen der Schriftgröße für ein Element verwenden, handelt es sich immer noch um eine relative Größe, jedoch nur relativ zum HTML-Root-Element. Man kann sagen, dass diese Einheit die Vorteile der relativen Größe und der absoluten Größe kombiniert. Dadurch können Sie alle Schriftgrößen proportional anpassen, indem Sie nur das Stammelement ändern, und Sie können die Kettenreaktion der zusammengesetzten Schriftgrößen Schicht für Schicht vermeiden.

Beispiel:

p {font-size:14px; font-size:.875rem;}

(Lernvideo-Sharing:

CSS-Video-Tutorial

)

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