Was ist der Unterschied zwischen px, em und rem in CSS?

Differenz: px steht für Pixel, eine relative Längeneinheit. Sie legt die Schriftgröße im Verhältnis zur Bildschirmauflösung fest. IE-Skalierung wird nicht unterstützt Element unterstützt die IE-Skalierung; rem ist eine relative Längeneinheit, die die Schriftgröße relativ zum HTML-Stammelement festlegt.

Empfohlenes Tutorial: CSS-Video-Tutorial

Definition von PX, EM und REM

px stellt Pixel dar und ändert sich aufgrund von Größenänderungen anderer Elemente nicht.

Die Größe des Pixels „ändert sich“, auch bekannt als „relative Länge“. Je höher das Pixel, desto reicher ist die Farbpalette und desto realistischer kann die Farbe ausgedrückt werden.

em stellt die Schriftgröße relativ zum übergeordneten Element dar. Es gibt keinen festen Messwert, sondern einen relativen Wert, der durch die Größe anderer Elemente bestimmt wird.

em ist eine relative Längeneinheit, relativ zur Schriftgröße des Texts im aktuellen Objekt. Wenn die aktuelle Schriftgröße des Inline-Textes nicht manuell festgelegt wurde, ist sie relativ zur Standardschriftgröße des Browsers. und wird häufig im Ausland verwendet.

Die Standardschrifthöhe jedes Browsers beträgt 16 Pixel, und alle nicht angepassten Browser entsprechen: 1em=16 Pixel. Dann muss 12px=0.75em; 10px=0.625em; um die Konvertierung der Schriftgröße zu vereinfachen, Font-size=62.5% im Body-Selektor in CSS deklariert werden, wodurch der em-Wert zu 16px*62.5% wird. =10px ; Auf diese Weise ist 12px=1.2em; 10px=1em, das heißt, Sie müssen nur Ihren ursprünglichen px-Wert durch 10 teilen und dann em als Einheit ändern.

REM ist eine relative Einheit und relativ zum HTML-Stammelement. 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.

Eigenschaften von px-, em- und rem-Einheiten in CSS-Stylesheets

Im Allgemeinen verwenden wir px zum Definieren von Schriftarten, sodass wir die Browser-Schriftartverstärkungsfunktion und die meisten ausländischen Websites nicht verwenden können Es kann unter IE verwendet werden . Dies liegt hauptsächlich daran:

(1) IE kann die Schriftgröße, die px als Einheit verwendet, nicht anpassen. (2) Der Grund, warum sie em als Einheit verwenden können

(3), Firefox kann px und em anpassen, aber mehr als 96 % der chinesischen Internetnutzer verwenden den IE-Browser (oder Kernel).

Was sind also die Eigenschaften der CSS-Einheiten px, em und rem?

1. Eigenschaften von px

PX ist eigentlich ein Pixel. Wenn PX zum Festlegen der Schriftgröße verwendet wird, 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.

Daher wurde vorgeschlagen, „em“ zu verwenden, um die Schriftart der Webseite zu definieren.

2. Merkmale von EM

EM ist im Wesentlichen ein relativer Wert, kein spezifischer numerischer Wert, normalerweise mit „font-size“ ist der Benchmark. Der Benchmark des offiziellen WordPress-Themes Twentytwelve ist beispielsweise 14px=1em.

Im Allgemeinen weist em die folgenden Eigenschaften auf:

(1), der Wert von em ist nicht festgelegt;

(2), em erbt die Schriftgröße des übergeordneten Elements.

Wenn wir also CSS schreiben, müssen wir auf die folgenden drei Punkte achten:

(1), deklarieren Sie Font-size=62,5 % im Body-Selektor;

(2), dividieren Sie Ihren ursprünglichen px-Wert durch 10. Ersetzen Sie sie dann als Einheit.

Wenn nur die beiden oben genannten Schritte das Problem lösen können, darf niemand px verwenden. Nach den beiden oben genannten Schritten werden Sie feststellen, dass die Schriftgröße Ihrer Website unerwartet groß ist, da der Wert von em nicht festgelegt ist und die Größe des übergeordneten Elements erbt. Sie können die Schriftgröße im Inhalt auf 1,2em festlegen div. Das sind 12px.

Dann stellen Sie die Schriftgröße des Selektors p auf 1,2 em ein. Wenn p jedoch zum untergeordneten Element des Inhalts gehört, beträgt die Schriftgröße von p nicht 12 Pixel, sondern 1,2 em = 1,2 * 12 Pixel = 14,4 Pixel. Dies liegt an der Schriftart Die Größe des Inhalts ist auf 1,2 em festgelegt. Dieser em-Wert erbt die Größe des übergeordneten Elementkörpers, die 16 Pixel * 62,5 % * 1,2 = 12 Pixel beträgt, und p als untergeordnetes Element. Em erbt auch die Schrifthöhe des Inhalts. Es beträgt 12 Pixel , also ist 1,2em von p nicht mehr 12px, sondern 14,4px.

(3) Berechnen Sie den em-Wert dieser vergrößerten Schriftarten neu, um eine wiederholte Angabe der Schriftgröße zu vermeiden.

Damit soll das Phänomen 1,2 * 1,2 = 1,44 vermieden werden. Wenn Sie beispielsweise die Schriftgröße in #content als 1,2em deklarieren, kann sie bei der Deklaration der Schriftgröße von p nur 1em und nicht 1,2em sein , weil dieses em Es ist nicht em, es erbt die Schrifthöhe von #content und wird zu 1em=12px.

Die Ausnahme bilden jedoch chinesische 12-Pixel-Zeichen, d. Dieses Problem wurde einfach gelöst. Ändern Sie einfach 62,5 % auf 63 % und es wird normal angezeigt. Der Grund dafür ist möglicherweise, dass die Genauigkeit von Gleitkommawerten begrenzt ist Wenn es weitere Erklärungen und Optimierungsmethoden gibt (für eine detailliertere Optimierung lesen Sie bitte die entsprechende Einführung in Ma Haixiangs Blog „Schauen Sie sich CSS-Details an, die die Effizienz verbessern können, aber leicht übersehen werden“).

3. Eigenschaften von rem

rem ist eine neue relative Einheit (root em, root em), die zu CSS3 hinzugefügt wurde.

EM legt die Schriftgröße relativ zu seinem übergeordneten Element fest. Um ein Element festzulegen, müssen Sie möglicherweise die Größe seines übergeordneten Elements kennen, während Rem die Schriftgröße relativ zum Stammelement festlegt. html>. Das bedeutet, dass wir nur einen Referenzwert am Wurzelelement ermitteln müssen.

Derzeit unterstützen alle Browser außer IE8 und früher rem.

Für Browser, die dies nicht unterstützen, ist die Lösung sehr einfach: Schreiben einer zusätzlichen absoluten Einheitenanweisung. Diese Browser ignorieren mit rem festgelegte Schriftgrößen.

Das Folgende ist ein Beispiel:

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

Der Unterschied zwischen px-, em- und rem-Einheiten in CSS-Stylesheets

Normalerweise besteht der Unterschied zwischen px und em darin, dass px eine absolute Einheit ist und IE nicht unterstützt Für die Skalierung ist em eine relative Einheit und unterstützt die IE-Skalierung. Tatsächlich sind die Unterschiede zwischen den CSS-Einheiten em, px und rem wie folgt:

1 relativ zur Bildschirmauflösung des Monitors.

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

2. EM

EM: Es handelt sich um eine relative Längeneinheit, die zur Gestaltung der Schriftgröße relativ zum übergeordneten Element verwendet wird. Wenn die aktuelle Schriftgröße für Inline-Text nicht manuell festgelegt wurde, ist sie relativ zur Standardschriftgröße des Browsers.

Vor- und Nachteile: Der Wert von EM ist nicht festgelegt, er erbt die Schriftgröße des übergeordneten Elements.

Konvertierung zwischen PX und EM:

Die Standardschrifthöhe jedes Browsers beträgt 16 Pixel. Alle unveränderten Browser entsprechen: 1em=16px. Dann ist 12px=0,75em, 10px=0,625em.

Aus Gründen der Benutzerfreundlichkeit deklarieren wir bei der Verwendung von em normalerweise „font-size=62,5 %“ im Body-Selektor in CSS (wodurch der em-Wert zu: 16px*62,5 %=10px wird). Danach müssen Sie nur noch Divide verwenden Erhöhen Sie den px-Wert um 10, um den em-Wert zu erhalten, z. B.: 12px=1,2em, 10px=1em.

3. REM

REM ist eine neue relative Einheit und ein relatives HTML-Stammelement.

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.

Derzeit unterstützen alle Browser außer IE8 und früher rem.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Programmierlehre

! !

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