Detailed explanation of the difference between px and em units in CSS

Use px to define fonts, and you cannot use the browser font amplification function, while most foreign websites can be used in IE browsers.

Cause:

　1.IE cannot adjust the font size in px units.

　2. Most foreign countries use em as the font unit.

px, em are relative length units,

px is relative to the display resolution.

em is the font size relative to the text in the current object. If the font size of the text in the current object has not been set, it is relative to the browser's default font size.

The default font of any browser is 16px, and all unset browsers comply with: 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 index become 16px*62.5%=10px, so 12px=1.2em, 10px=1em, also That is to say, divide the original px value by 10, and then replace it with the em 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.

Therefore, it needs to be emphasized:

1. Declare font-size=62.5%

in the body selector 2. Divide the original px value by 10. Then change to em as the unit

　3. Recalculate the em value of those enlarged fonts to avoid repeated declaration of font size.

Note:

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 Slightly larger.

You 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 accuracy of floating point values ​​is limited.

The above is what the editor introduces to you to thoroughly understand the difference between the units px and em in CSS. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply in time. Ours. I would also like to thank you all for your support of the PHP Chinese website!

The above is the detailed content of Detailed explanation of the difference between px and em units in CSS. For more information, please follow other related articles on the PHP Chinese website!