Der Unterschied zwischen px- und em-Einheiten in CSS

Inländische Websites, einschließlich der drei großen Portale, sowie Blue Ideal, das den Trend des chinesischen Website-Designs „anführt“, ChinaUI usw., 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: ​

1. Früher konnte IE die Schriftgröße nicht mit px als Einheit anpassen, aber jetzt unterstützt es fast jeder IE

2. Der Grund, warum die meisten ausländischen Websites angepasst werden können, ist, dass sie em als Schriftarteinheit verwenden; 3. 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:

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 zwei Punkte achten:

1. Deklarieren Sie Font-size=62,5 % im Body-Selektor; 2. Teilen Sie Ihren ursprünglichen px-Wert durch 10 und ersetzen Sie ihn dann durch em als Einheit; 3. Berechnen Sie die Em-Werte 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.

Die Ausnahme bilden jedoch chinesische 12-Pixel-Zeichen, d. 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 vonDer Unterschied zwischen px- und em-Einheiten in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!