First, the basic introduction
1, "Ems": em, size is not fixed, become a relative unit (body is relative to the default browser font settings, subset relative to the parent), the browser default font size is 16px, then 1em = 16px, and its extensible, 2EM = 32px, the current commonly used font size PX converted to EM ,
16px = 1em; 14px = 0.875em; 12px = 0.75em; 10px = 0.625em
2, "Pixels": px, the size is fixed, called absolute units, on the mobile side of the poor accessibility
3, "Points":p t, fixed size, belongs to absolute units, suitable for printing, printing media.
4, "Percent":%, similar to the EM, Percent to indicate that the current font size is 100%, using the% setting font, your page font on the mobile device side of the accessibility is also very good.
Second, the relationship
In general, 1em=12pt=16px=100%. The following example assumes that the base font size is set in body.
As can be seen, relative units of EM and% will vary with the base font size, while PT and PX will not change, which is why choosing EM and% sets the font for Web document text (which is also good for mobile access).
Three, EM and%, the conversion of EM and px
Features of EM:
1. The value of EM is not fixed;
2. Em inherits the font size of the parent element.
Rewrite steps:
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;
If you only need the above two steps to solve the problem, probably no one will use PX. After these two steps, you will find that your website font is too big to imagine. 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, the font size of P 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, which is 16px * 62.5% * 1.2=12px, and P as its child, EM inherits the content of the font high, that 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 declaration of font size, that is, avoid the above mentioned 1.2 * 1.2 = 1.44 phenomenon. For example, when you declare a font size of 1.2em in #main, you can only have 1em when declaring the font size of p, not 1.2em, because this em is not em, it becomes 1em=12px because it inherits the font height of #content.
Bizarre 12px Kanji
In the completion of the EM conversion will also find a strange phenomenon, is obtained by the above method 12px (1.2em) size of Chinese characters in IE does not equate directly with 12px defined font size, but slightly larger. This problem I have solved, you just need to change 62.5% in the body selector to 63% will be able to display the normal.
CSS font-size:em, PX, PT, percent relationship and conversion
