CSS Length Unit optimization method

1. The body selector declares the font-size=62.5%;

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

Simple, if only need the above two steps can solve the problem, may no one use PX. After two steps, you will find that your site is too large to be imagined. Because the value of EM is not fixed and inherits the size of the parent element, you might set the font size to 1.2em, or 12px, in the content div. Then you also set the selector p font size to 1.2em, but if p belongs to the content of the child, P's font size is not 12px, but 1.2em=1.2 * 12px=14.4px. This is because the font size of the content is set to 1.2em, the EM value inherits the size of the body of its parent element, that is, the 16px * 62.5% * 1.2=12px, and P as its child, and EM inherits the content's font height, which is 12px. So the 1.2em of P is no longer 12px, but 14.4px.

3. Recalculate the EM values of the enlarged fonts. Avoid duplicate statements of font size, which is to avoid the 1.2 * 1.2 = 1.44 mentioned above. 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.

4. The above method of 12px (1.2em) size of Chinese characters in IE is not equal to the direct use of 12px defined font size, but slightly larger. Solution: Simply change the 62.5% to 63% in the body selector to display it correctly.