The difference between EM and px in CSS

Font-size:1.5em;

In fact, in foreign CSS writing, using EM as a unit is a lot of human considerations, the second is the United States Department of Labor Section508 Act imposed restrictions. So in web design, there are three kinds of metric units commonly used, namely PX/EM/PT:

*PX unit name for pixels, relative length units, pixels (px) is relative to the screen resolution of the display, domestic sites are many of the use of PX as a unit.

The *EM unit name is the relative length unit. The font size relative to the text within the current object. Used a lot in foreign countries. Many advanced browsers "except IE basic" all support font adjustment.

*PT unit name is dot (point), Absolute length unit, this is very old, with a beard. Basically no use of it.

First, how to convert between EM and px?

* The default font height of any browser is 16px (16 pixels).

* All 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 that 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.

Second, what is the characteristics of EM units?

The value of the *em is not fixed.

*em inherits the font size of the parent element.

When we are writing CSS, if you want to use EM as a unit, you need to pay attention to two points:

Declare font-size=62.5% in *body selector;

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

* Recalculate the EM values of the enlarged fonts. Avoid duplicate declarations of font size.

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

Note: It is recommended that you do not use EM as the text unit of the Chinese site, resulting in very serious text distortion.