Analyse zur Umrechnung zwischen Längeneinheiten in CSS

Die am häufigsten verwendete Längeneinheit beim Schreiben von CSS ist px (Pixel), und em, pt usw. werden häufig verwendet. Tatsächlich gibt es in CSS 8 Längeneinheiten, nämlich px, em, pt, ex, pc , Zoll, mm, cm.
1. px: Pixel, relativ zur Längeneinheit des Geräts, Pixel sind relativ zur Bildschirmauflösung des Monitors.
Beispielsweise beträgt die von WONDOWS-Benutzern verwendete Auflösung im Allgemeinen 96 Pixel/Zoll. Die von MAC-Benutzern verwendete Auflösung beträgt im Allgemeinen 72 Pixel/Zoll.
2. em: relative Längeneinheit. Die Schriftgröße relativ zum Text im aktuellen Objekt.
Wenn die Schriftgröße des aktuellen Inline-Textes nicht manuell festgelegt wurde, ist sie relativ zur Standardschriftgröße des Browsers.
3. pt: Punkt, absolute Längeneinheit.
4. Beispiel: relative Längeneinheit. Höhe relativ zum Zeichen „x“. Diese Höhe beträgt normalerweise die Hälfte der Schriftgröße.
Wenn die aktuelle Schriftgröße für Inline-Text nicht manuell festgelegt wurde, ist sie relativ zur Standardschriftgröße des Browsers.
5. pc: Pica, absolute Längeneinheit. Es entspricht der Größe des neuen Typs Nr. 4 meines Landes.
6. in: Zoll, absolute Längeneinheit.
7. mm: Millimeter, absolute Längeneinheit.
8, cm: Zentimeter, absolute Längeneinheit.
Darunter: 1 Zoll = 2,54 cm = 25,4 mm = 72 pt = 6 Stück;
Wir verwenden oft px als Einheit für die Größe des Containers; viele Leute verwenden px als Einheit für die Schriftgröße (Schriftgröße). , aber tatsächlich px als Schriftarteinheit verwenden. Der einzige schwerwiegende Nachteil besteht darin, dass die Browser-Schriftartskalierungsfunktion unter IE nicht verwendet werden kann.
Allerdings denke ich persönlich, dass der Nachteil, px als Schriftarteinheit zu verwenden und die Browser-Schriftskalierungsfunktion unter dem IE nicht nutzen zu können, nicht mehr so ​​wichtig ist. Weil die neuen Versionen von IE7 und IE8 bereits die Zoomfunktion der gesamten Webseite unterstützen, die standardmäßig die gesamte Webseite zoomt, anstatt die Schriftart zu skalieren. Hat es eine Bedeutung, nicht einfach die Schriftgröße zu skalieren? Strg + Scrollen in der Mitte der Maus Probieren Sie das Scrollrad aus!

Tatsächlich gibt es in CSS 8 Längeneinheiten, nämlich px, em, pt, ex, pc, in, mm, cm ;
px: Pixel (Pixel), relativ zur Längeneinheit des Geräts, Pixel sind relativ zur Bildschirmauflösung. Beispielsweise beträgt die von WONDOWS-Benutzern verwendete Auflösung im Allgemeinen 96 Pixel/Zoll. Die von MAC-Benutzern verwendete Auflösung beträgt im Allgemeinen 72 Pixel/Zoll.
em: Relative Längeneinheit. Die Schriftgröße relativ zum Text im aktuellen Objekt. Wenn die Schriftgröße des aktuellen Inline-Textes nicht manuell festgelegt wurde, ist sie relativ zur Standardschriftgröße des Browsers.
Beispiel: relative Längeneinheit. Höhe relativ zum Zeichen „x“. Diese Höhe beträgt normalerweise die Hälfte der Schriftgröße. Wenn die aktuelle Schriftgröße für Inline-Text nicht manuell festgelegt wurde, ist sie relativ zur Standardschriftgröße des Browsers.
pt: Punkt, absolute Längeneinheit.
pc: Pica, absolute Längeneinheit. Es entspricht der Größe des neuen Typs Nr. 4 meines Landes.
in: Zoll, absolute Längeneinheit.
mm: Millimeter, absolute Längeneinheit.
cm: Zentimeter, absolute Längeneinheit.
Unter ihnen: 1 Zoll = 2,54 cm = 25,4 mm = 72 pt = 6 Stück;
Wir verwenden oft px als Einheit für die Größe des Behälters, und viele haben nichts dagegen, px als Einheit dafür zu verwenden Schriftgröße (Schriftgröße). Tatsächlich besteht der einzige fatale Nachteil der Verwendung von px als Schrifteinheit darin, dass die Browser-Schriftskalierungsfunktion unter IE nicht verwendet werden kann. Oder halten Sie die Strg-Taste gedrückt und scrollen Sie mit dem mittleren Rad der Maus.
So viele Leute empfehlen die Verwendung von HTML-EM-Einheiten. Es ist definitiv nicht sehr praktisch für Leute, die es gewohnt sind, px zu verwenden. Hier sind einige Umrechnungsformeln und Vergleichstabellen als Referenz:

px to em:Example: 12px / 16px = .75em
px to %:Example: 12px / 16px * 100 = 75%
px to pt:Example: 16px * 72 (72 points = 1 inch) / 96 (96 pixels per inch in Windows, 72 in Mac) = 12pt
em to www.hnnedu.com px:Example: .75em * 16px = 12px
em to %:Example: .75em * 100 = 75%
% to px:Example: 75 * 16px / 100 = 12px
% to em:Example: 75 / 100 = .75em
pt to px:Example: 12pt * 96ppi / 72ppi = 16px
PixelsEMsPercentPoints
6px0.375em37.5%5pt
7px0.438em43.8%5pt
8px0.5em50%6pt
9px0.563em56.3%7pt
10px0.625em62.5%8pt
11px0.688em68.8%8pt
12px0.75em75%9pt
13px0.813em81.3%10pt
14px0.875em87.5%11pt
15px0.938em93.8%11pt
16px1em100%12pt
17px1.063em106.3%13pt
18px1.125em112.5%14pt
19px1.188em118.8%14pt
20px1.25em125%15pt
21px1.313em131.3%16pt
22px1.375em137.5%17pt
23px1.438em143.8%17pt
24px1.5em150%18pt

Das obige ist der detaillierte Inhalt vonAnalyse zur Umrechnung zwischen Längeneinheiten in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!