CSS length units and differences em ex px PT in

1. CSS Relative length units

The font height of the øem element

Øex the height of the font x

øpx pixels | pixels

ø% percent Percentage

2. CSS Absolute Length units

Øin inch inches (1 inch = 2.54 cm)

øcm cm centimeters

ømm mm millimetre

Øpt Point points (1 points =1/72 inches)

ØPC Pickup picas (1 pickup = 12 points)

3. Description of Unit EM

EM refers to the high font, any browser default font height is 16px. So the unmodified browser is compliant with: 1EM=16PX. So 12px=0.75em. But EM is not fixed, it inherits the font size of the parent element. You might set the font size to 1.2em in the content Div, which is 12px. Then you also set the selector p font size to 1.2em, but if p belongs to the content of the child, the font size of P is not 12px, but 1.2em= 1.2 * 12px=14.4px. This is because the font size of the content is set to 1.2em, the EM value inherits the size of the body of its parent element, which is 16px * 62.5% * 1.2=12px, and P as its child, EM inherits the content of the font high, that is, 12px. So the 1.2em of P is no longer 12px, but 14.4px.

4. Description of Unit PT

In print layout, point is an absolute value, which is equal to 1/72 inches, which can be measured by a ruler, in physical inches. But in CSS the meaning of PT is not so. Because our display is divided into pixels, a single pixel can only have one color (in order to simplify, the sub-pixel anti-aliasing technique is not discussed here), to display on the screen, you must first convert the length in PT to the length in pixels, the medium of the conversion is DPI (in fact, The so-called DPI here is the term used in the operating system and the browser, that is, the PPI, pixels per inch, and the DPI in the scanner, printer, and digital camera are different concepts.

For example, in any operating system, the default DPI of the Firefox browser is 96, then actually 9PT = 9 * 1/72 * = 12px.

Therefore, although "I" in "DPI" and "1pt equals 1/72 inch" in the "inch", do not represent the physical inches, but the two units are equal to each other, also in the multiplication is about to drop.

So, how does the real physical length count? Please take out a ruler and measure the visible width of your monitor (I'm 11.2992 inches), divided by the horizontal resolution (I'm 1024 pixels here), and get the physical length of each pixel.

Now we can answer the question, how much space does 9pt of the Web page occupy? The answer is: 9 * 1/72 * 96 * 11.2992/1024 = 0.1324 inches = 0.3363 centimeters.

5. PT and PX

Although PT is an absolute unit, it is only for output devices and is a very useful font unit in the Text Layout tool (Word,abobe). Regardless of the resolution of the Monitor, the results printed on paper are the same.

But the Web page is mainly for screen display, not for printing and other needs. PX can accurately represent the position and size of the element in the screen.

Of course. In the case of DPI is 96, 9pt=12px.

Http://www.cnblogs.com/jlsme/articles/1294620.html

CSS length units and differences em ex px PT in