Kennen Sie den Unterschied zwischen em und px in CSS?

Inländische Websites, einschließlich der drei großen Portale, sowie Blue Ideal und ChinaUI, die den Trend des chinesischen Website-Designs „anführen“, verwenden alle px als Schriftarteinheit. Nur Baidu hat ein wandelbares Beispiel gegeben. Auf der anderen Seite des Ozeans verwenden fast alle Mainstream-Websites em als Schriftarteinheit, die anpassbar ist. Ja, px ist einfacher zu verwenden als em, und die meisten Leser wissen nicht, was em ist oder wie viel px es ist. Ausländische Menschen legen so großen Wert auf die Barrierefreiheit von Websites (Barrierefreiheit), nicht nur wegen ihres tief verwurzelten humanistischen Geistes, sondern der direkte Grund könnte darin liegen, dass es ein Gesetz gibt, das sie einschränkt – wie etwa Abschnitt 508 in den Vereinigten Staaten, der Websites dazu zwingt um ein gewisses Maß an Barrierefreiheit zu erreichen.

Wichtige Punkte:

IE kann die Schriftgröße, die px als Einheit verwendet, nicht anpassen.

Der Grund, warum die meisten ausländischen Websites angepasst werden können, ist, dass sie em als Schriftart verwenden Einheit ;

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

px Pixel (Pixel). Relative Längeneinheit. Pixel px beziehen sich auf die Bildschirmauflösung des Monitors.

em ist eine relative Längeneinheit. Die Schriftgröße relativ zum Text im aktuellen Objekt. Wenn die aktuelle Schriftgröße für Inline-Text nicht manuell festgelegt wurde, ist sie relativ zur Standardschriftgröße des Browsers.

Die Standardschrifthöhe jedes Browsers beträgt 16 Pixel. Alle unveränderten Browser entsprechen: 1em=16px. Dann 12px=0,75em, 10px=0,625em. Um die Konvertierung der Schriftgröße zu vereinfachen, müssen Sie im Body-Selektor in CSS Font-size=62,5 % deklarieren, wodurch der em-Wert 16px*62,5%=10px wird, also 12px=1,2em, 10px=1em , auch Das heißt, Sie müssen nur Ihren ursprünglichen px-Wert durch 10 teilen und dann zu em als Einheit wechseln.

em hat die folgenden Eigenschaften:

Der Wert von em ist nicht festgelegt.

em erbt die Schriftgröße des übergeordneten Elements.

Wenn wir also CSS schreiben, müssen wir auf einige Punkte achten:

Deklarieren Sie Font-size=62,5 % im Body-Selektor.

Ändern Sie Ihre ursprünglichen Pixel Wert durch 10 dividieren und dann auf em als Einheit umstellen;

Berechnet den em-Wert dieser vergrößerten Schriftarten neu. Vermeiden Sie wiederholte Angaben zu Schriftgrößen.



Damit soll das Phänomen 1,2 * 1,2 = 1,44 vermieden werden. Wenn Sie beispielsweise in #content die Schriftgröße als 1,2em deklarieren, kann die Schriftgröße von p, wenn Sie sie deklarieren, nur 1em und nicht 1,2em sein, da dieses Em nicht das Em ist und die Schriftart erbt Höhe von #content. Es wurde 1em=12px.


Eine Ausnahme bilden jedoch chinesische 12-Pixel-Zeichen, d größer. Dieses Problem wurde von Jorux gelöst. Ändern Sie einfach 62,5 % in 63 % und es wird normal angezeigt. Der Grund kann sein, dass bei der Verarbeitung chinesischer Zeichen durch den IE die Genauigkeit von Gleitkommawerten begrenzt ist. Ich weiß nicht, ob es eine andere Erklärung gibt.

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