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).

Was ist em?

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.

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 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; }

Der Unterschied zwischen em- und px-Schrifteinheiten

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.

Als ich diesen Blog anpasste, stellte ich fest, dass nicht nur die Schriftart, sondern auch der Zeilenabstand (Zeilenhöhe) und die vertikalen Höheneinheiten alle in em waren. Achten Sie bei der Skalierung auf Integrität.

em hat die folgenden Eigenschaften:

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

Schritte zum Umschreiben:

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.

2. rem-Funktionen

rem ist eine neue relative Einheit (root em, root em) in CSS3. Diese Einheit hat große Aufmerksamkeit erregt konzentrieren Sie sich auf. 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.

Beispiel:

p {font-size:14px; font-size:.875rem;}

Hinweis:

Die Wahl der zu verwendenden Schriftarteneinheit hängt hauptsächlich von Ihrem Projekt ab. Wenn Ihre Benutzerbasis die neueste Version des Browsers verwendet, wird empfohlen, rem zu verwenden. Wenn Sie die Kompatibilität berücksichtigen möchten, verwenden Sie px oder beide gleichzeitig Zeit.

3. Schriftart-Konvertierungstabelle

28pt

14,5pt

Schriftgröße	pt	px	em
Nr. 1	42pt	56px	3,5em
Xiaochu	36pt	48px	3em
	34pt	45px	2,75em
	32pt	42px	2,55em
	30pt	40px	2,45em
	29pt	38px	2,35em
	37px	2,3em
	27pt	36px	2,25em
Nr.1	26pt	35px	2.2em
	25pt	34px	2.125em
小一	24pt	32px	2em
Nr. 2	22pt	29px	1,8em
	20pt	26px	1,6em
Kellner	18pt	24px	1,5em
	17pt	23px	1,45em
Nr. 3	16pt	22px	1.4em
小三	15pt	21px	1,3em
	20px	1,25em
Nr.4	14pt	19px	1,2em
	13,5pt	18px	1.125em
	13pt	17px	1,05em
小四	12pt	16px	1em
	11pt	15px	0,95em
Nr. 5	10,5 pt	14px	0,875em
	10pt	13px	0,8em
小五	9pt	12px	0,75em
	8pt	11px	0,7em
Nr. 6	7,5pt	10px	0,625em
	7pt	9px	0,55em
小六	6,5pt	8px	0,5em
Nr. 7	5,5 Punkte	7px	0,4375em
Achtes	5pt	6px	0,375em

　　　　

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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!