The relationship and conversion between em, px, pt, and Percent in CSS

This article mainly introduces the relationship and conversion between CSS Font-Size: em, px, pt, and Percent. This article is quite detailed. Friends who need it can refer to it

一, Basic introduction
1. "Ems": em, the size is not fixed and becomes a relative unit (body is relative to the browser's default font setting, and subset is relative to the parent). The browser's default font size is 16px, then 1em = 16px, and it is scalable, 2em = 32px, the currently commonly used font size px is converted into em,
16px = 1em; 14px = 0.875em; 12px = 0.75em; 10px = 0.625em
2. "Pixels ": px, the size is fixed, called an absolute unit, and the accessibility on the mobile terminal is poor
3. "Points": pt, the size is fixed, it is an absolute unit, and it is suitable for printing and print media.
4. "Percent": %, similar to em. If expressed in percent, the current font size is 100%. Use % to set the font. Your page font will also have good accessibility on mobile devices.
2. Relationship
Generally, 1em=12pt=16px=100%. The following example assumes that the basic font size is set in the body.

As can be seen from the above figure, the relative units em and % will change as the basic font size changes, while pt and px will not change. This is why em and % are selected to set the web document The font for the text (which is also great for mobile accessibility).
3. Conversion between em and %, em and px
Features of em:
1. The value of em is not fixed;
2. em will inherit the font size of the parent element.
Rewriting 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 only the above two steps were needed to solve the problem, probably no one would use px. After the above two steps, you will find that the font size of your website is unexpectedly large. Because the value of em is not fixed and will inherit the size of the parent element, you may set the font size in the content p to 1.2em, which is 12px. Then you set the font size of selector p to 1.2em, but if p belongs to the child of content, the font size of p is not 12px, but 1.2em= 1.2 * 12px=14.4px. This is because the font size of content is set to 1.2em. This em value inherits the size of its parent element body, which is 16px * 62.5% * 1.2=12px, and p is its child, and em inherits the font height of content. , which is 12px. So 1.2em of p is no longer 12px, but 14.4px.
3. Recalculate the em values ​​of those enlarged fonts. Avoid repeated declarations of font size, that is, avoid the 1.2 * 1.2 = 1.44 phenomenon mentioned above. For example, if you declare the font size to be 1.2em in #main, then when you declare the font size of p, it can only be 1em, not 1.2em, because this em is not that em, and it inherits the font height of #content. It became 1em=12px.
Weird 12px Chinese characters
When completing the em conversion, we will also find a strange phenomenon, that is, the 12px (1.2em) Chinese characters obtained by the above method are not equal to the font size directly defined by 12px in IE. , but slightly larger. I have solved this problem. You only need to change 62.5% to 63% in the body selector and it will display normally.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to solve the problem of float:right right-aligned elements in CSS that wrap and are not on the same line

The above is the detailed content of The relationship and conversion between em, px, pt, and Percent in CSS. For more information, please follow other related articles on the PHP Chinese website!