Thoroughly understand the difference between px and em units in css_html/css_WEB-ITnose

Most domestic designers like to use px, while most foreign websites like to use em. So what is the difference between the two, and what are the advantages and disadvantages of each?

1. IE cannot adjust the font size that uses px as the unit;
2. The reason why most foreign websites can adjust is that they use em as the font unit;
3. Firefox can Adjust px and em, but more than 96% of Chinese netizens use IE browser (or kernel).

px pixels (Pixel). Relative length unit. Pixels px are relative to the monitor screen resolution. (Quoted from CSS2.0 manual)

em is a relative length unit. The font size relative to the text within the current object. If the current font size for inline text has not been manually set, it will be relative to the browser's default font size. (Quoted from CSS2.0 manual)

The default font height of any browser is 16px. All unmodified browsers conform to: 1em=16px. Then 12px=0.75em,10px=0.625em. In order to simplify the conversion of font-size, you need to declare Font-size=62.5% in the body selector in CSS, which makes the em value become 16px*62.5%=10px, so 12px=1.2em, 10px=1em, also That is to say, you only need to divide your original px value by 10, and then change to em as the unit.

em has the following characteristics:

1. The value of em is not fixed;
2. em will inherit the font size of the parent element.

So when we write CSS, we need to pay attention to two points:
1. Declare Font-size=62.5% in the body selector;
2. Divide your original px value by 10, and then change to em as the unit;
3. Recalculate the em value of those enlarged fonts. Avoid repeated declarations of font sizes.

That is to avoid the phenomenon of 1.2 * 1.2= 1.44. For example, if you declare the font size to be 1.2em in #content, then when you declare the font size of p, it can only be 1em, not 1.2em, because this em is not that em, and it inherits the font height of #content. It became 1em=12px.

However, the exception is 12px Chinese characters. The 12px (1.2em) Chinese characters obtained by the above method are not equal to the font size directly defined by 12px in IE, but are slightly larger. This problem has been solved by Jorux. Just change 62.5% to 63% in the body selector and it will display normally. The reason may be that when IE processes Chinese characters, the accuracy of floating point values ​​is limited. I don't know if there is any other explanation.