Detaillierte Erklärung der Eigenschaften, Unterschiede und Konvertierung von px, em, rem und pt in CSS

Konzepteinführung :

1. px (Pixel): Dies ist eine virtuelle Längeneinheit und eine digitale Bildlängeneinheit des Computersystems. Wenn px in eine physikalische Länge umgewandelt werden soll, muss die Genauigkeit DPI (Dots Per Inch) angegeben werden. DPI ist beim Scannen und Drucken normalerweise optional. Der Standardwert für Windows beträgt 96 dpi und für Apple 72 dpi.

2. em (relative Längeneinheit, relativ zur Schriftgröße des Textes im aktuellen Objekt): Es handelt sich um eine relative Längeneinheit, die sich ursprünglich auf die Breite des Buchstabens M bezog, daher der Name em. Es bezieht sich jetzt auf ein Vielfaches der Zeichenbreite und wird ähnlich wie ein Prozentsatz verwendet, z. B.: 0,8em, 1,2em, 2em usw. Normalerweise 1em=16px.

3. pt (Punkt): ist eine physikalische Längeneinheit, die sich auf ein Zweiundsiebzigstel eines Zolls bezieht. pt=1/72(Zoll), px=1/dpi(Zoll)

4. rem (root em): Dies ist eine in CSS3 neu hinzugefügte relative Einheit, die große Aufmerksamkeit erregt hat. Wie unterscheidet sich diese Einheit von anderen? Der Unterschied besteht darin, dass die Schriftgröße eines Elements, wenn Sie sie mit „rem“ festlegen, zwar immer noch relativ ist, jedoch nur relativ zum HTML-Stammelement. Diese Einheit kombiniert die Vorteile der relativen und absoluten Größe. Sie kann verwendet werden, um alle Schriftgrößen proportional anzupassen, indem nur das Stammelement geändert wird. Gleichzeitig wird die Kettenreaktion vermieden, bei der die Schriftgrößen Schicht für Schicht zusammengesetzt werden. Derzeit unterstützen alle Browser außer IE8 und früheren Versionen rem. Für Browser, die dies nicht unterstützen, ist die Lösung auch sehr einfach: Sie müssen eine zusätzliche Deklaration der absoluten Einheiten schreiben. Diese Browser ignorieren die in rem eingestellten Schriftgrößen.

1. Das Problem von em und px

Was ist px?

px Pixel. Relative Längeneinheit. Pixel (px) beziehen sich auf die Auflösung des Anzeigebildschirms. (Zitat aus dem CSS 2.0-Handbuch)

Em ist eine relative Längeneinheit. Relativ zur Schriftgröße des Textes innerhalb des aktuellen Objekts. Wenn die Schriftgröße des Inline-Textes nicht manuell eingestellt wird, ist sie relativ zur Standardschriftgröße des Browsers. (Zitat aus dem CSS 2.0-Handbuch)

PX-Funktionen

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

2. Der Grund, warum die meisten ausländischen Websites angepasst werden können, besteht darin, dass sie em oder rem als Schrifteinheiten verwenden.

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

Was ist sie?

„em“ bezieht sich auf die Schrifthöhe und die Standardschrifthöhe jedes Browsers beträgt 16px. Daher gilt für alle nicht angepassten Browser: 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. Dadurch ändert sich der em-Wert in 16px*62.5%=10px, also 12px=1.2em, 10px=1em. Mit anderen Worten, Sie müssen nur Ihren ursprünglichen px-Wert durch 10 teilen und dann em als Einheit verwenden.

em-Funktionen:

1em bezieht sich auf die Größe einer Schriftart, die die Schriftgröße des übergeordneten Elements erbt. Es handelt sich also nicht um einen festen Wert. Die Standardschriftgröße für jeden Browser beträgt 16 Pixel. Daher ist 12px = 0,75em. Um die Konvertierung zu erleichtern, wird in praktischen Anwendungen der Stil normalerweise wie folgt festgelegt:

html { Schriftgröße: 62,5 %; }

Somit ist 1em = 10px. Die von uns häufig verwendeten 1,2em sind theoretisch 12px. Diese Konvertierung funktioniert jedoch nicht im IE-Browser. 1,2em ist etwas größer als 12px. Die Lösung besteht darin, 62,5 % im HTML-Tag-Stil in 63 % zu ändern, das heißt:

html { Schriftgröße: 63%; }

In chinesischen Artikeln stehen am Anfang eines Absatzes normalerweise zwei Leerzeichen. Wenn px als Einheit verwendet wird, muss eine 12px-Schriftart 24px Platz haben und eine 14px-Schriftart 28px Platz … Diese Konvertierung ist nicht universell. Wenn wir die Einheit em verwenden, lässt sich dieses Problem leicht lösen. Die Größe eines Zeichens beträgt 1em, die Größe von zwei Zeichen beträgt 2em. Definieren Sie es einfach wie folgt:

p { Texteinzug: 2em; }

Der Unterschied zwischen em- und px-Schrifteinheiten

Die Schrifteinheit sollte em statt px sein. Der Grund ist einfach, die Schriftskalierung in IE6 zu unterstützen. Wenn Sie auf der Seite Strg+Scrollrad drücken, reagiert die Website mit Schriftarten in px nicht. px ist eine absolute Einheit und unterstützt keine IE-Skalierung, während em eine relative Einheit ist.
Als ich dieses Blog anpasste, stellte ich fest, dass nicht nur die Schriftarten, sondern auch der Zeilenabstand (Zeilenhöhe) und die vertikalen Höheneinheiten em sein sollten. Stellen Sie beim Skalieren die Integrität sicher.

em hat die folgenden Eigenschaften:
1. Der Wert von em ist nicht festgelegt;
2. em erbt die Schriftgröße des übergeordneten Elements.

em-Umschreibeschritte:

1. Deklarieren Sie im Body-Selektor die Schriftgröße „Font-size=62.5%“.
2. Teilen Sie Ihren ursprünglichen px-Wert durch 10 und verwenden Sie dann em als Einheit.
Es ist ganz einfach, oder? Wenn das Problem mit nur den beiden oben genannten Schritten gelöst werden könnte, würde niemand px verwenden. Nach den beiden oben genannten Schritten werden Sie feststellen, dass die Schriftarten auf Ihrer Website größer sind, als Sie gedacht haben. Da der Wert von „em“ nicht festgelegt ist und die Größe des übergeordneten Elements übernimmt, können Sie die Schriftgröße im Inhalts-Div auf 1,2em (also 12 Pixel) festlegen. Anschließend setzt man die Schriftgröße des Selektors p auf 1,2em, aber wenn p ein untergeordnetes Element des Inhalts ist, beträgt die Schriftgröße von p nicht 12px, sondern 1,2em = 1,2 * 12px = 14,4px. Dies liegt daran, dass die Schriftgröße des Inhalts auf 1,2 em eingestellt ist. Dieser em-Wert erbt die Größe des übergeordneten Elementkörpers, die 16px * 62,5 % * 1,2 = 12px beträgt. Da p sein untergeordnetes Element ist, erbt em die Schrifthöhe des Inhalts, die 12px beträgt. 1,2em von p sind also nicht mehr 12px, sondern 14,4px.
3. Berechnen Sie die Em-Werte der vergrößerten Schriftarten neu. Vermeiden Sie wiederholte Angaben zur Schriftgröße, d. h. das oben erwähnte Phänomen von 1,2 * 1,2 = 1,44. Wenn Sie beispielsweise die Schriftgröße in #content als 1,2em deklarieren, kann die Schriftgröße von p beim Deklarieren nur 1em und nicht 1,2em sein, da dieses em nicht jenes em ist. Es erbt die Schrifthöhe von #content und wird zu 1em = 12px.
12px chinesische Schriftzeichen im Internet Explorer:
Beim Abschließen der em-Konvertierung wurde ein seltsames Phänomen entdeckt. Die mit der obigen Methode erhaltene chinesische Schriftgröße von 12px (1,2em) entspricht nicht der direkt mit 12px im IE definierten Schriftgröße, sondern ist etwas größer. Sie müssen lediglich im Body-Selektor 62,5 % in 63 % ändern und es wird normal angezeigt. Der Grund hierfür kann darin liegen, dass der Internet Explorer bei der Verarbeitung chinesischer Schriftzeichen eine begrenzte Genauigkeit bei der Verarbeitung von Gleitkommawerten aufweist. Dieses Phänomen tritt nur bei chinesischen Schriftzeichen mit 12 Pixeln auf und existiert im Englischen nicht. Die Lösung besteht darin, 62,5 % in style.css in 63 % zu ändern.

2. Merkmale des dinglichen Rechts

rem ist eine in CSS3 neu hinzugefügte relative Einheit (root em), die große Aufmerksamkeit erregt hat. Wie unterscheidet sich diese Einheit von anderen? Der Unterschied besteht darin, dass die Schriftgröße eines Elements, wenn Sie sie mit „rem“ festlegen, zwar immer noch relativ ist, jedoch nur relativ zum HTML-Stammelement. Diese Einheit kombiniert die Vorteile der relativen und absoluten Größe. Sie kann verwendet werden, um alle Schriftgrößen proportional anzupassen, indem nur das Stammelement geändert wird. Gleichzeitig wird die Kettenreaktion vermieden, bei der die Schriftgrößen Schicht für Schicht zusammengesetzt werden. Derzeit unterstützen alle Browser außer IE8 und früheren Versionen rem. Für Browser, die dies nicht unterstützen, ist die Lösung auch sehr einfach: Sie müssen eine zusätzliche Deklaration der absoluten Einheiten schreiben. Diese Browser ignorieren die in rem eingestellten Schriftgrößen.

Beispiel:

p {Schriftgröße:14px; Schriftgröße:.875rem;}

Beachten:

Welche Schrifteinheit Sie wählen, hängt hauptsächlich von Ihrem Projekt ab. Wenn Ihre Benutzer die neuesten Browser verwenden, empfiehlt sich die Verwendung von rem. Wenn Kompatibilität ein Problem darstellt, verwenden Sie px oder beides.

3. Schriftartenkonvertierungstabelle

Dies ist das Ende dieses Artikels über die Eigenschaften, Unterschiede und Konvertierungsdetails von px, em, rem, pt in CSS. Weitere relevante CSS-Inhalte zu px und em finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!