The difference between the unit PX and EM in the detailed CSS

The use of PX to define fonts, can not be used to enlarge the browser font, and most foreign sites can be used in Internet Explorer.

Reason:

1.IE cannot adjust the font size for PX units.

2. Most foreign countries use EM as font units.

Px,em are relative length units,

PX is relative to the display resolution.

EM is the font size relative to the text within the current object, relative to the default font size of the browser, if the text font size in the current object is not set by a person.

The default font for any browser is 16px, and all browsers that are not set up conform to: 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 EM refers to 16px*62.5%=10px, so 12px=1.2em,10px=1em, In other words, the original PX value is divided by 10 and then replaced by the EM unit.

EM has the following characteristics:

The value of 1.em is not fixed.

2.em inherits the font size of the parent element.

It is therefore necessary to emphasize:

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

2. Divide the original PX value by 10 and then replace it with the EM unit

3. Recalculate the EM value of the magnified font, avoiding duplicate declaration of font size.

Precautions:

The 12px (1.2EM) characters obtained by using the above method are not equal to the font size defined by 12px directly in IE, but slightly larger.

You need to change 62.5% to 63% in the body selector to display it properly.

The reason may be that when IE handles Chinese characters, the value of floating point is limited in accuracy.

The above is a small part of the introduction of a thorough understanding of the CSS in the unit PX and the difference between EM, I hope we have some help, if you have any questions please give me a message, small series will promptly reply to you. Thank you very much for your support for topic.alibabacloud.com!