Vergleichen Sie die Unterschiede und Zusammenhänge zwischen px, em, rem und pt in CSS

In diesem Artikel werden hauptsächlich die Eigenschaften, Unterschiede und Konvertierungen zwischen px, em, rem und pt in CSS vorgestellt. Außerdem wird ausführlich erläutert, ob jede Größeneinheit die Größe des übergeordneten Elements erbt und ob der Browser mit Freunden kompatibel ist kann sich auf

Konzepteinführung beziehen:

1. px (Pixel, Pixel): ist eine virtuelle Länge Einheit ist die digitale Bildlängeneinheit des Computersystems. Wenn px in physische Länge umgewandelt werden soll, muss die Genauigkeit DPI (Dots Per Inch, Pixel pro Zoll) angegeben werden. Beim Scannen und Drucken gibt es im Allgemeinen eine DPI-Option. Der Standardwert für Windows-Systeme ist 96 dpi und der Standardwert für Apple-Systeme ist 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 bezieht , daher der Name em. Jetzt bezieht es sich auf das Vielfache der Zeichenbreite und seine Verwendung ähnelt einem Prozentsatz, wie zum Beispiel: 0,8em, 1,2em, 2em usw. Normalerweise 1em=16px.

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

4. rem (root em, root em): ist eine neue relative Einheit in CSS3, dies Die Einheit erregte große Aufmerksamkeit. Was ist der Unterschied zwischen dieser Einheit und ihnen? Der Unterschied besteht darin, dass es sich bei der Verwendung von rem zum Festlegen der Schriftgröße für ein Element immer noch um eine relative Größe handelt, diese jedoch nur 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. 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.

1. Fragen zu em und px

Was ist px?

px Pixel (Pixel). Relative Längeneinheit. Pixel px beziehen sich auf die Bildschirmauflösung des Monitors. (Zitiert aus dem CSS2.0-Handbuch)

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. (Zitiert aus dem CSS2.0-Handbuch)

PX-Funktionen

1. 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 oder rem als Schriftarteinheit verwenden.

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

em bezieht sich auf die Schrifthöhe. Die Standardschrifthöhe jedes Browsers beträgt 16 Pixel. Daher gilt für unangepasste Browser: 1em=16px. Dann 12px=0,75em, 10px=0,625em. Um die Konvertierung der Schriftgröße zu vereinfachen, müssen Sie im CSS-Body-Selektor 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.

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 in tatsächlichen Anwendungen zu erleichtern, wird der Stil normalerweise wie folgt festgelegt:

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

Auf diese Weise ist 1em = 10px. Das häufig verwendete 1,2em ist theoretisch 12px. Diese Konvertierung funktioniert jedoch nicht im IE-Browser. 1.2em ist etwas größer als 12 Pixel. Die Lösung besteht darin, 62,5 % im HTML-Tag-Stil auf 63 % zu ändern, das heißt:

html { Schriftgröße : 63 %; }

In chinesischen Artikeln stehen normalerweise zwei Leerzeichen am Anfang des Absatzes. Wenn px als Einheit verwendet wird, müssen 24 Pixel für eine 12-Pixel-Schriftart weggelassen werden, und 28 Pixel müssen für eine 14-Pixel-Schriftart weggelassen werden ... Diese Konvertierung ist sehr unbrauchbar. Wenn Sie die Einheit em verwenden, kann dieses Problem leicht gelöst werden. Die Größe eines Wortes beträgt 1em und die Größe der beiden Wörter beträgt 2em. Definieren Sie es daher einfach so:

p { text-indent: 2em; }

The Die Schriftarteinheit sollte em statt px sein. Einfach ausgedrückt unterstützt sie die Schriftartenskalierung unter IE6. Wenn Sie auf der Seite Strg + Scrollrad drücken, reagieren Websites mit Schriftarten in px nicht. px ist eine absolute Einheit und unterstützt keine IE-Skalierung, und em ist eine relative Einheit.

1. Der Wert von em ist nicht festgelegt. em erbt die Schriftgröße des übergeordneten Elements.

1. Deklarieren Sie „Font-size=62.5%“ im Textkörper-Selektor;
2. Teilen Sie Ihren ursprünglichen px-Wert durch 10 und ersetzen Sie ihn durch em als Einheit; oben Wenn das Problem in zwei Schritten gelöst werden könnte, würde vielleicht 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, können Sie die Schriftgröße im Inhalt p auf 1,2em festlegen, was 12 Pixel entspricht. Dann legen Sie die Schriftgröße des Selektors p auf 1,2em fest, aber wenn p zum untergeordneten Element des Inhalts gehört, 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,2em festgelegt ist. Dieser em-Wert erbt die Größe seines übergeordneten Elementkörpers, der 16px * 62,5% * 1,2=12px beträgt, und p ist sein untergeordnetes Element, und em erbt die Schrifthöhe von Inhalt, also 12 Pixel. 1,2em von p sind also nicht mehr 12px, sondern 14,4px.
3. Berechnen Sie die Em-Werte dieser vergrößerten Schriftarten neu. Vermeiden Sie wiederholte Angaben zur Schriftgröße, d. h. vermeiden Sie das oben erwähnte Phänomen 1,2 * 1,2 = 1,44. Wenn Sie beispielsweise die Schriftgröße in #content 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 dieses em ist und die Schriftart erbt Höhe von #content. Es wurde 1em=12px.
12px chinesische Zeichen im IE:
Als ich die EM-Konvertierung abschloss, entdeckte ich auch ein seltsames Phänomen, nämlich dass die 12px (1,2em) chinesischen Zeichen, die mit der obigen Methode erhalten wurden, nicht den Schriftarten entsprechen, die direkt mit definiert wurden 12px in IE-Größe, aber etwas größer. Sie müssen in der Körperauswahl nur 62,5 % auf 63 % ändern und es wird normal angezeigt. Der Grund kann sein, dass bei der Verarbeitung chinesischer Zeichen durch den IE die Genauigkeit von Gleitkommawerten begrenzt ist. Dieses Phänomen tritt nur bei chinesischen 12-Pixel-Zeichen auf und kommt im Englischen nicht vor. Die Lösung besteht darin, 62,5 % in style.css durch 63 % zu ersetzen.

Das obige ist der detaillierte Inhalt vonVergleichen Sie die Unterschiede und Zusammenhänge zwischen px, em, rem und pt in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!