CSS understands the difference between the unit em and PX

Here we reference jorux's "95% of Chinese websites need to rewrite CSS"ArticleThe question is a little 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 ).

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

Em is the unit of relative length. The font size relative to 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 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 inherits the font size of the parent element.

Therefore, when writing CSS, pay attention to the following two points:

1. Declare font-size = 62.5% in the body selector;

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 becomes 1em = 12px because it inherits the font of # content.

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.