Conversion between px and em

Many web designers set the font size in the universal selector when writing CSS. In Chinese cases, it is usually 12px. However, IE browser cannot adjust the font size that uses px as the unit. In fact, using em as the unit can avoid this situation.

1. The difference between em and px:
1. IE cannot adjust the font size that uses px as the unit;

2. Firefox can adjust px and em.

3.px pixel (Pixel). Relative length unit. Pixels px are relative to the monitor screen resolution.

4.em is a relative unit of length. The font size relative to the text within the current object. If the current font size for inline text has not been manually set, it is relative to the browser's default font size. If the browser's default font size has not been modified, it defaults to 16px.

2. Characteristics of em:
1. The value of em is not fixed.

2. em will inherit the font size of the parent element.

3. How to convert em and px
The default font height of any browser is 16px. All unmodified browsers conform to: 1em=16px. Then 12px=0.75em,10px=0.625em.

In order to simplify the conversion of font-size, you need to globally declare Font-size=62.5% in the body selector or universal selector in CSS. Many beginners may define 0.625em here or directly define 12px. This It has no effect, you must define font-size=62.5%!

This changes the em value to 16px*62.5%=10px, so 12px=1.2em, 10px=1em, that is to say, you only need to divide your original px value by 10, and then change to em as the unit. .

4. When applying em in CSS, you need to pay attention to two points:
1. Declare Font-size=62.5% in the body selector.

2. Divide your original px value by 10, and then replace it with em as the unit.

3. Recalculate the em values ​​of those enlarged fonts. Avoid repeated declarations of font sizes.

4. Since em can inherit the characteristics of the parent element, it avoids the phenomenon of 1.2 * 1.2= 1.44. For example, if you declare the font size to be 1.2em in #content (parent element), then when you declare the font size of p (child element), it can only be 1em, not 1.2em, because this em is not the other em. Because the font height of #content is inherited, it becomes 1em=12px.

In addition, one thing must be noted. When IE processes Chinese characters, the floating point value accuracy is limited. The 12px font that comes out at 62.5% under the body is larger than the directly defined one. You need to replace 62.5% with 63%. . Through the above adjustments to the CSS code, you will find that your website is one step closer to user experience design.