Page Font font-size control of the ultimate pk! of EM and px

Control | Web page

Quoted here is Jorux's "95% Chinese web site needs to rewrite the CSS" article, the topic is a bit scary, but it is now a number of domestic web page production defects. I have not been clear about the relationship between PX and EM and the characteristics, after seeing the harvest is really very large. Usually use PX to define fonts, so can not use browser font amplification function, and most foreign websites can be used under IE. Because

1. IE cannot adjust the font size used for PX as the unit;
2. Most of the foreign websites can be adjusted because of their use of EM as font units;
3. Firefox can adjust px and em, but more than 96% of Chinese netizens use IE (or the kernel).

px Pixels (Pixel). Relative length units. Pixel px is relative to the screen resolution of the Monitor.

EM is the relative length unit. The font size relative to the text within the current object. If the font size of the current text in the row is not set artificially, it is relative to the browser's default font size.

The default font height for any browser is 16px. All the unadjusted browsers are compliant: 1EM=16PX. So 12px=0.75em, 10px=0.625em. In order to simplify the conversion of font-size, it is necessary to declare font-size=62.5% in the body selector in CSS, which makes the EM value 16px*62.5%=10px, so 12px=1.2em, 10px=1em, That means you just have to divide your original PX value by 10, and then replace EM as the unit.

EM has the following characteristics:

1. The value of EM is not fixed;
2. Em inherits the font size of the parent element.
So when we write CSS, we need to be aware of:

1. The body selector declares the font-size=62.5%;
2. Divide your original PX value by 10, then replace EM as the unit;
3. Recalculate the EM values of the enlarged fonts. Avoid duplicate declarations of font size.

That is to avoid the 1.2 * 1.2 = 1.44 phenomenon. For example, if you declare a font size of 1.2em in #content, you can only 1em when declaring P's font size, not 1.2em, because this em is not the other em, it becomes 1em=12px because it inherits the #content font height.

But the exception of 12px Chinese characters is that the 12px (1.2em) size of Chinese characters obtained by the above method is not equal to the font size defined directly with 12px, but slightly larger. This problem Jorux has been resolved, only in the body selector in the 62.5% to 63% can be normal display. The reason may be that when IE deals with Chinese characters, the precision of floating-point values is limited. Don't know if there's any other explanation.