Differences and conversions of PX/EM/PT

I am always asked about the differences between PX, PT, and Em. Sometimes I will also find out what units I should use. I have checked some articles specially today. Although this article is a long time ago, however, the explanation is comprehensive. Click to view Original Text

Here we reference jorux's article "CSS needs to be rewritten for 95% of Chinese websites". The question is a bit scary, but it is indeed a defect in the production of domestic Web pages. I have never been clear about the relationship and features between PX and em. I have learned a lot since I saw it. In general, PX is used to define the font. Therefore, the font amplification function cannot be used in browsers, and most foreign websites can use it in IE. Because:

1. ie cannot adjust the font size that uses PX as the unit;
2. The reason why most foreign websites can be adjusted is that they use EM as the font unit;
3. Firefox can adjust PX and Em, but more than 96% of Chinese users use IE browser (or kernel ).

PxPixel is the unit of relative length, and pixel PX is relative to the screen resolution of the monitor. (Derived from the css2.0 manual)

EmIs the unit of relative length, relative to the font size of the text in the current object. If the font size of the text in the row is not set manually, the default font size is relative to that of the browser. (Derived from the css2.0 manual)

The font unit uses em to support font scaling in IE6. Press Ctrl + scroll wheel on the page, and the font in PX is not reflected by the website.

PxIt is an absolute unit and does not support ie scaling.
EmIs the relative unit, and the text in the webpage can be scaled up or down. Use em for line-height and vertical height. Ensure integrity during scaling.
The default font height of any browser is 16 PX. All unadjusted browsers match: 1em = 16px. Then 12px = 0.75em, 10px = 0.625em. To simplify font-size conversion, you must declare font-size = 62.5% in the body selector in CSS, which changes the EM value to 16px * 62.5% = 10px, so that 12px = 1.2em, 10px = 1em, that is, you only need to divide your original PX value by 10, and then change to Em as the unit.

Em has the following features:
1. The EM value is not fixed;
2. Em will continue the font size of the parent element.

Therefore, when writing CSS, note the following:
1. Declare font-size = 62.5% in the body selector; (font-size = 63%; For IE6 compatibility)
2. Divide your original PX value by 10 and change it to Em as the unit;
3. recalculate the EM values of the enlarged fonts. Avoid repeated statement of font size.
That is, to avoid 1.2*1.2 = 1.44. For example, if you declare in # content that the font size is 1.2em, the font size of P can only be 1em, not 1.2em, because this EM is not em, it is changed to 1em = 12px because the font of # content is higher.
Except for the 12 PX Chinese character, the 12 PX (1.2em) Chinese Character obtained by the above method is not equal to the font size defined by 12 PX directly in IE, but a little larger. This problem has been solved by jorux. You only need to change 62.5% to 63% in the body selector to display it normally. The reason may be that when ie processes Chinese characters, the floating point value accuracy is limited. I don't know if there are any other explanations.

Unit PT description

In the printed layout, point is an absolute value, which is equal to 1/72 inch. It can be measured using a ruler, physical inches. But in CSS, Pt does not mean so. Because our display is divided into pixels, a single pixel can only have one color (to simplify it, we will not discuss the next pixel anti-sawtooth technology). It should be displayed on the screen, you must first convert the length in PT units to the length in pixels. The conversion media is DPI (in fact, the so-called DPI here, is the term used in operating systems and browsers, I .e., PPI, pixels per inch, which is different from DPI in scanners, printers, and digital cameras ).

For example, in any operating system, the default DPI of Firefox is 96, so 9pt = 9*1/72*96 = 12px.

Therefore, although "I" and "1pt" in "DPI" are equal to 1/72 Inch ", they do not represent physical inches, but the two units are equal to each other, in this case, it is reduced in the multiplication.

How can we calculate the actual physical length? Take out a ruler and measure the visible width of your monitor (11.2992 inch here). divide it by the horizontal resolution (1024 pixels here). The physical length of each pixel is obtained.

Now we can answer this question: how much space does the 9pt font occupy on the webpage? The answer is: 9*1/72*96*11.2992/1024 = 0.1324 inch = 0.3363 cm.

Although PT is an absolute unit, it is only for the output device. It is a very useful font unit in word and abits. Regardless of the display resolution, the results are the same on paper.

However, Web pages are mainly used for screen display, rather than printing. Px can accurately represent the position and size of an element on the screen.

Of course. When DPI is 96, 9pt = 12px.

With PX, em, %, and PT exchange tables

Px, em, %, and PT Conversion

Differences and conversions of PX/EM/PT