Detailed explanation of the characteristics, differences and conversion of px, em, rem and pt in CSS

Concept introduction :

1. px (pixel): It is a virtual unit of length and a digital image length unit of the computer system. If px is to be converted into physical length, the precision DPI (Dots Per Inch) needs to be specified. DPI is usually optional when scanning and printing. The default for Windows is 96dpi, and the default for Apple is 72dpi.

2. em (relative length unit, relative to the font size of the text in the current object): It is a relative length unit, originally referring to the width of the letter M, hence the name em. It now refers to a multiple of the character width, and is used similarly to a percentage, such as: 0.8em, 1.2em, 2em, etc. Usually 1em=16px.

3. pt (point): is a physical unit of length, referring to one-seventy-second of an inch. pt=1/72(inch), px=1/dpi(inch)

4. rem (root em): It is a relative unit newly added in CSS3, which has attracted widespread attention. How is this unit different from em? The difference is that when you use rem to set the font size for an element, it is still a relative size, but it is only relative to the HTML root element. This unit combines the advantages of relative size and absolute size. It can be used to proportionally adjust all font sizes by only modifying the root element, while avoiding the chain reaction of compounding font sizes layer by layer. Currently, all browsers except IE8 and earlier support rem. For browsers that do not support it, the solution is also very simple, which is to write an extra declaration of absolute units. These browsers will ignore font sizes set in rem.

1. The problem of em and px

What is px?

px Pixel. Relative unit of length. Pixel px is relative to the display screen resolution. (Quoted from the CSS 2.0 manual)

Em is a relative unit of length. Relative to the font size of the text within the current object. If the font size of the inline text is not set manually, it is relative to the browser's default font size. (Quoted from the CSS 2.0 manual)

PX Features

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 or rem as font units;

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

What is em?

em refers to the font height, and the default font height of any browser is 16px. So all unadjusted browsers will conform to: 1em=16px. Then 12px=0.75em, 10px=0.625em. To simplify font-size conversion, you need to declare Font-size=62.5% in the body selector in CSS. This will change the em value to 16px*62.5%=10px, so 12px=1.2em, 10px=1em. In other words, you only need to divide your original px value by 10 and then use em as the unit.

em Features:

1em refers to the size of a font, which inherits the font size of the parent element, so it is not a fixed value. The default font size for any browser is 16px. Therefore, 12px = 0.75em. In practical applications, in order to facilitate conversion, the style is usually set as follows:

html { font-size: 62.5%; }

Thus, 1em = 10px. The 1.2em we often use is theoretically 12px. However, this conversion does not work in IE browser. 1.2em is slightly larger than 12px. The solution is to change 62.5% in the HTML tag style to 63%, that is:

html { font-size: 63%; }

In Chinese articles, there are usually two spaces at the beginning of a paragraph. If px is used as the unit, a 12px font needs to have 24px space, and a 14px font needs to have 28px space... This conversion is not universal. If we use the em unit, this problem can be easily solved. The size of one character is 1em, and the size of two characters is 2em. So, just define it like this:

p { text-indent: 2em; }

The difference between em and px font units

The font unit should be em instead of px. The reason is simply to support font scaling in IE6. When you press ctrl+scroll wheel on the page, the website with fonts in px will not respond. px is an absolute unit and does not support IE scaling, while em is a relative unit.
When I was adjusting this blog, I found that not only the fonts, but also the line spacing (line-height) and vertical height units should be em. Ensure integrity when scaling.

em has the following characteristics:
1. The value of em is not fixed;
2. em will inherit the font size of the parent element.

em rewrite steps:

1. Declare Font-size=62.5% in the body selector;
2. Divide your original px value by 10, and then use em as the unit;
It’s simple, right? If the problem can be solved with just the above two steps, no one would use px. After the above two steps, you will find that the fonts on your website are larger than you imagined. 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 div to 1.2em, which is 12px. Then you set the font size of the selector p to 1.2em, but if p is a 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. As p is its child, 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 the fonts that are enlarged. Avoid repeated declarations of font sizes, that is, avoid the phenomenon of 1.2 * 1.2 = 1.44 mentioned above. For example, if you declare the font size in #content as 1.2em, then when declaring the font size of p, it can only be 1em, not 1.2em, because this em is not that em. It inherits the font height of #content and becomes 1em=12px.
12px Chinese characters in IE:
When completing the em conversion, a strange phenomenon was discovered. The 12px (1.2em) Chinese character size obtained by the above method is not equal to the font size defined directly with 12px in IE, but is slightly larger. You just need to change 62.5% to 63% in the body selector and it will display normally. The reason may be that IE has limited precision in taking floating-point values ​​when processing Chinese characters. This phenomenon only occurs in Chinese characters of 12px, and does not exist in English. The solution is to change 62.5% in style.css to 63%.

2. Characteristics of rem

rem is a relative unit newly added in CSS3 (root em), which has attracted widespread attention. How is this unit different from em? The difference is that when you use rem to set the font size for an element, it is still a relative size, but it is only relative to the HTML root element. This unit combines the advantages of relative size and absolute size. It can be used to proportionally adjust all font sizes by only modifying the root element, while avoiding the chain reaction of compounding font sizes layer by layer. Currently, all browsers except IE8 and earlier support rem. For browsers that do not support it, the solution is also very simple, which is to write an extra declaration of absolute units. These browsers will ignore font sizes set in rem.

Example:

p {font-size:14px; font-size:.875rem;}

Notice:

The font unit you choose depends mainly on your project. If your user base uses the latest browsers, it is recommended to use rem. If compatibility is a concern, use px, or use both.

3. Font conversion table

This is the end of this article about the characteristics, differences and conversion details of px, em, rem, pt in CSS. For more relevant CSS px and em content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!