Was sind die Einheiten von CSS?

CSS-Einheiten sind: %, Zoll, Zentimeter, Millimeter; 1 Punkt entspricht 1/72 Zoll; px, Pixel (ein Punkt auf dem Computerbildschirm); vw, die volle Bildschirmbreite beträgt 100vw; die volle Bildschirmhöhe beträgt 100vh.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

% Prozent

in Zoll

cm Zentimeter

mm Millimeter

em

1em entspricht der aktuellen Schriftgröße.

2em entspricht dem Doppelten der aktuellen Schriftgröße.

Wenn beispielsweise ein Element mit 16 Pixel angezeigt wird, dann ist 2em 32 Pixel.

In CSS ist em eine sehr nützliche Einheit, da es sich automatisch an die vom Benutzer verwendete Schriftart anpasst.

ex Ein Ex ist die x-Höhe einer Schriftart. (x-Höhe ist normalerweise die Hälfte der Schriftgröße.)

pt Punkt (1 pt entspricht 1/72 Zoll)

pc 12-Punkt-Typ (1 pc entspricht 12 Punkten)

px Pixel (ein Punkt auf einem Computerbildschirm )

vw: (Wert 1-100), verstehen Sie, dass die volle Bildschirmbreite 100 vw beträgt und sich an den Bildschirm anpasst.

Vh: (Wert 1-100), beachten Sie, dass die Vollbildhöhe 100 Vh beträgt, adaptiver Bildschirm.

Erweiterte Informationen:

1. Das Problem von 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;

2. Der Grund, warum die meisten ausländischen Websites eine Anpassung vornehmen können, ist, dass sie em oder rem als Schriftarten verwenden Einheit;

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

em Was ist das?

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 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-Funktionen:

1em bezieht sich auf die Größe einer Schriftart. Sie erbt die Schriftgröße des übergeordneten Elements, 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:

CSS-Code

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:

CSS-Code

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 und 28 Pixel 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:

CSS-Code

p { text-indent: 2em }

Der Unterschied zwischen em- und px-Schrifteinheiten

Die Schriftarteinheit sollte em und nicht px sein. Es unterstützt lediglich die Schriftartenskalierung unter IE6. 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, und em ist eine relative Einheit.

Als ich diesen Blog angepasst habe, 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: Der Wert von

1. em ist nicht festgelegt;
2. em erbt die Schriftgröße des übergeordneten Elements.

em-Umschreibungsschritte:

1. Deklarieren Sie „Font-size=62,5 %“ in der Textauswahl;
2. Dividieren Sie Ihren ursprünglichen px-Wert durch 10 und ersetzen Sie ihn dann durch em als Einheit;

   Einfach, wenn Sie nur If benötigen Die beiden oben genannten Schritte können das Problem lösen. Möglicherweise wird 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 den Em-Wert 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 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.

   12px chinesische Zeichen im IE:

   Ich habe beim Abschluss der EM-Konvertierung auch ein seltsames Phänomen entdeckt, nämlich dass die 12px (1,2em) chinesischen Zeichen, die mit der obigen Methode erhalten wurden, nicht der direkt durch 12px im IE definierten Schriftgröße entsprechen , aber es ist 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.

Ein px-, em-, pt-Einheiten-Konvertierungstool:

Adresse: http://pxtoem.com/

2. rem-Funktionen

    rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

Beispiel:

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

Achtung:

    选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

Das obige ist der detaillierte Inhalt vonWas sind die Einheiten von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!