Analysis on conversion between length units in CSS

The most commonly used length unit when writing CSS is px (pixel), and em, pt, etc. are often seen. In fact, there are 8 length units in CSS, namely px, em, pt, ex, pc, in, mm, cm.
　1. px: Pixel, relative to the length unit of the device, pixels are relative to the monitor screen resolution.
For example, the resolution used by WONDOWS users is generally 96 pixels/inch. The resolution used by MAC users is generally 72 pixels/inch.
　2. em: relative length unit. The font size relative to the text within the current object.
If the font size of the current inline text has not been manually set, it will be relative to the browser's default font size.
　3. pt: Point, absolute unit of length.
4. ex: relative length unit. Height relative to character "x". This height is usually half the font size.
If the current font size for inline text has not been manually set, it will be relative to the browser's default font size.
5. pc: Pica, absolute unit of length. It is equivalent to the size of my country's new No. 4 type.
6. in: inch, absolute unit of length.
7. mm: Millimeter, absolute unit of length.
8. cm: Centimeter, absolute unit of length.
Where: 1in = 2.54cm = 25.4 mm = 72pt = 6pc ;
We often use px as the unit for the size of the container; many people use px as the unit for font size (font-size), but actually use px as the font unit. The only fatal drawback is that the browser font scaling function cannot be used under IE.
However, I personally think that the disadvantage of using px as the font unit and not being able to use the browser font scaling function under IE is no longer that important. Because the new versions of IE7 and IE8 already support the zoom function of the entire web page, including Firefox, which by default zooms the entire web page instead of scaling the font. Is there any significance in not simply scaling the font size? Hold down Ctrl + scroll the middle of the mouse Try the scroll wheel! IE has improved!

In fact, there are 8 length units in CSS, namely px, em, pt, ex, pc, in, mm, cm;
px: pixel (Pixel), relative to the length unit of the device, pixels are relative to the display screen resolution. For example, the resolution used by WONDOWS users is generally 96 pixels/inch. The resolution used by MAC users is generally 72 pixels/inch.
em: Relative length unit. The font size relative to the text within the current object. If the font size of the current inline text has not been manually set, it is relative to the browser's default font size.
ex: Relative length unit. Height relative to character "x". This height is usually half the font size. If the current font size for inline text has not been manually set, it will be relative to the browser's default font size.
pt: Point, absolute length unit.
pc: Pica, absolute unit of length. It is equivalent to the size of my country's new No. 4 type.
in: Inch, absolute unit of length.
mm: Millimeter, absolute unit of length.
cm: Centimeter, absolute unit of length.
Among them: 1in = 2.54cm = 25.4 mm = 72pt = 6pc;
We often use px as the unit for the size of the container, and everyone has no objection. Many domestic people use px as the unit for font size (font-size). , in fact, the only fatal disadvantage of using px as the font unit is that the browser font scaling function cannot be used under IE. Or hold down Ctrl + scroll the middle wheel of the mouse.
So many people suggest using html em units. It is definitely not very convenient for people who are used to using px. Here are some conversion formulas and comparison tables for your reference:

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

The above is the detailed content of Analysis on conversion between length units in CSS. For more information, please follow other related articles on the PHP Chinese website!