Analysis of the most commonly used length units in html and css

There are 8 length units in Html and CSS, namely px, em, pt, ex, pc, in, mm, and cm.

1.px

px: Pixel, relative to the length unit of the device, pixels are relative to the monitor screen resolution. For example, the resolution used by Windows users is generally 96 pixels/inch. The resolution used by MAC users is generally 72 pixels/inch.

2.em

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.

3.ex

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.

4.pt

pt: Point, absolute length unit.

5.pc

pc: Pica, absolute unit of length. It is equivalent to the size of my country's new No. 4 type.

6.in

in: Inch, absolute unit of length.

7.mm

mm: Millimeter, absolute unit of length.

8.cm

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 many domestic people use px for font size (font-size). Unit, 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 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

The above is the detailed content of Analysis of the most commonly used length units in html and css. For more information, please follow other related articles on the PHP Chinese website!