Difference between unit px and em in css

The unit of relative length of pixel (pixel) is relative to the screen resolution of the display (derived from the css tutorial 2.0 manual ).

The unit of relative em length is relative to the font size of the text in the current object. For example, the font size of the text in the current row is not set manually, the default font size relative to the browser (derived from the css2.0 manual ).

The default font height of any browser is 16 PX. All unadjusted browsers match: 1em = 16px. Then 12px = 0.75em, 10px = 0.625em. To simplify font-size conversion, you must declare font-size = 62.5% in the body selector in css, which changes the em value to 16px * 62.5% = 10px, in this case, 12px = 1.2em and 10px = 1em. That is to say, you only need to divide your original px value by 10 and change it to em as the unit.

Em has the following features:

1. The em value is not fixed;

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

Therefore, when writing css, pay attention to the following two points:

1. Declare font-size = 62.5% in the body selector;
2. Divide your original px value by 10 and change it to em as the unit;
3. Recalculate the em values of the enlarged fonts to avoid repeated declaration of the font size.

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

Most domestic designers like px, while most foreign websites like em. What are the differences between the two and their advantages and disadvantages?

1. ie cannot adjust the font size that uses px as the unit;

2. The reason why most foreign websites can be adjusted is that they use em as the font unit;

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

The relative length unit of pixel (pixel) is relative to the screen resolution of the display (derived from the css2.0 manual ).