Differences between units px and EM in CSS

px pixel (pixel) relative length units are relative to the screen resolution of the display (from the CSS Tutorial 2.0 manual).

The EM relative length unit is relative to the font size of the text within the current object, such as the font size of the current text in the row is not set artificially, relative to the browser's default font size (quoted in the css2.0 manual).

The default font height for any browser is 16px. All unadjusted browsers are compliant: 1EM=16PX. So 12px=0.75em, 10px=0.625em. In order to simplify the conversion of font, 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 is, just 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.

So when we write CSS, we need to pay attention to two points:

1, the body selector declaration font-size=62.5%;
2, your original PX value divided by 10, and then replace EM as units;
3. Recalculate the EM values of the enlarged fonts to avoid repeated 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, 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.

Most domestic designers like to use PX, and foreign sites mostly like to use EM, then what is the difference between the two, and what are their pros and cons?

1, IE can not adjust those who use PX as the unit font size;

2, most foreign websites can be adjusted because of the use of EM as font units;

3, Firefox can adjust px and em, but more than 96% of Chinese netizens use IE browser (or kernel).

px pixel (pixel) relative length units are relative to the screen resolution of the display (quoted from the css2.0 manual).