em px difference in CSS you really know that?

The font unit in the production of the site should use EM instead of PX, the reason is simply to support the IE6 under the font scaling, in the page Ctrl + Wheel, font to PX as the unit of the site does not respond, in this article will be detailed introduction

Before listening to people said that the site in the production of font units should use EM instead of PX, the reason is simply to support the IE6 under the font scaling, in the page Ctrl + Wheel, the font to PX as the unit of the site does not respond. PX is absolute unit, does not support IE scaling, EM is relative unit.

First of all, what is EM?

EM refers to the high font, the default font height of any browser is 16px. So 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.

Rewrite steps:

1. The body selector declares the font-size:62.5%;

2. Divide your original PX value by 10, then replace EM as the unit;

Simple, if only need the above two steps can solve the problem, may no one use PX. After two steps, you will find that your site is too large to be imagined. Because the value of EM is not fixed and inherits the size of the parent element, you might set the font size to 1.2em, or 12px, in the content div. Then you also set the selector p font size to 1.2em, but if p belongs to the content of the child, P's font size 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, that is, the 16px * 62.5% * 1.2=12px, and P as its child, and EM inherits the content's font height, which is 12px. So the 1.2em of P is no longer 12px, but 14.4px.

3. Recalculate the EM values of the enlarged fonts. Avoid duplicate statements of font size, which is to avoid the 1.2 * 1.2 = 1.44 mentioned above. For example, if you declare a font size of 1.2em in #main, 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.

Weird 12px characters.

In the completion of the EM conversion will also find a strange phenomenon, is the above method of 12px (1.2em) size of Chinese characters in IE is not equal to the font size directly defined in 12px, but slightly larger. This problem I have solved, you only need to change 62.5% in the body selector to 63% to be able to display the normal.