Konvertierung zwischen px und em

Viele Webdesigner legen die Schriftgröße beim Schreiben von CSS im Universal-Selektor fest. Bei Chinesisch beträgt sie normalerweise 12 Pixel. Allerdings kann der IE-Browser die Schriftgröße, die px als Einheit verwendet, nicht anpassen. Tatsächlich kann die Verwendung von em als Einheit diese Situation vermeiden.

1. Der Unterschied zwischen em und px:
1. IE kann die Schriftgröße, die px als Einheit verwendet, nicht anpassen;

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

4.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. Wenn die Standardschriftgröße des Browsers nicht geändert wurde, ist sie standardmäßig auf 16 Pixel eingestellt.

2. Eigenschaften von em:
1 Der Wert von em ist nicht festgelegt.

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

3. So konvertieren Sie em und px
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, muss Font-size=62,5 % global im Body-Selektor oder Universal-Selektor in CSS deklariert werden. Viele Anfänger definieren hier möglicherweise 0,625em Definieren Sie 12px direkt, was keine Auswirkung hat. Stellen Sie sicher, dass Sie die Schriftgröße = 62,5% definieren!
Dadurch wird der em-Wert auf 16px*62,5%=10px geändert, also 12px=1,2em, 10px=1em, was bedeutet, dass Sie Ihren ursprünglichen px-Wert nur durch 10 teilen und dann einfach ändern müssen em als die Einheit.

2. Bei der Anwendung in CSS sind zwei Punkte zu beachten:
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.

4. Da em die Eigenschaften des übergeordneten Elements erben kann, wird das Phänomen 1,2 * 1,2 = 1,44 vermieden. Wenn Sie beispielsweise die Schriftgröße in #content (übergeordnetes Element) als 1,2em deklarieren, kann die Schriftgröße von p (untergeordnetes Element) nur 1em und nicht 1,2em sein, da dies bei diesem em nicht der Fall ist das andere em. Da die Schrifthöhe von #content geerbt wird, beträgt sie 1em=12px.

Außerdem muss bei der Verarbeitung chinesischer Zeichen durch den IE eine begrenzte Genauigkeit festgestellt werden. Die 12-Pixel-Schriftart, die aus dem Körper kommt, ist größer als die direkt definierte 1. Sie müssen 62,5 % auf 63 % ändern. Durch die oben genannten Anpassungen am CSS-Code werden Sie feststellen, dass Ihre Website dem User Experience Design einen Schritt näher kommt.