Compare the differences and connections between px, em, rem, and pt in css

This article mainly introduces the characteristics, differences and conversions between px, em, rem, and pt in css. It also explains in detail whether each size unit inherits the size of the parent element and whether the browser is compatible. Friends in need can refer to the following

concept introduction:

1. px (pixel, pixel): is a The virtual length unit is the digital image length unit of the computer system. If px is to be converted into physical length, the precision DPI (Dots Per Inch, pixels per inch) needs to be specified. There is generally a DPI option when scanning and printing. The default for Windows systems is 96dpi, and the default for Apple systems 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. Now it refers to the multiple of the character width, and its usage is similar to a percentage, such as: 0.8em, 1.2em, 2em, etc. Usually 1em=16px.

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

4. rem (root em, root em): is a new relative unit in CSS3, this The unit attracted widespread attention. What is the difference between this unit and em? The difference is that when using 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 can be said to combine the advantages of relative size and absolute size. Through it, you can adjust all font sizes proportionally by modifying only the root element, and you can avoid 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 very simple, which is to write an additional absolute unit statement. These browsers ignore font sizes set with rem.

1. Questions about em and px

What is px?

px pixels (Pixel). Relative length unit. Pixels px are relative to the monitor screen resolution. (Quoted from CSS2.0 manual)

em is a relative length unit. 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 will be relative to the browser's default font size. (Quoted from CSS2.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 the font unit;

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

What is em?

em refers to the font height. The default font height of any browser is 16px. So unadjusted browsers comply with: 1em=16px. Then 12px=0.75em, 10px=0.625em. In order to simplify the conversion of font -size, you need to declare Font-size=62.5% in the body selector in CSS, which makes the em value become 16px*62.5%=10px, so 12px=1.2em, 10px=1em, also That is to say, you only need to divide your original px value by 10, and then change to em as the unit.

em Features:

1em refers to the size of a font. It will inherit 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 order to facilitate conversion in actual applications, the style is usually set as follows:

html { font-size: 62.5%; }

In this way, 1em = 10px. The commonly used 1.2em is theoretically 12px. However, this conversion does not hold in IE browser. 1.2em will be 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 the paragraph. If px is used as the unit, 24px needs to be left out for a 12px font, and 28px needs to be left out for a 14px font... This conversion is very unusable. If you use the em unit, this problem can be easily solved. The size of one word is 1em, and the size of the two words is 2em. Therefore, 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. Simply put, it supports font scaling under IE6. If 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, and em is a relative unit.
When I was adjusting this blog, I found that not only the font, but also the line spacing (line-height) and vertical height units were all in 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 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;
Simple, if you only need the above If the problem could be solved in two steps, maybe 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 #content, 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.
12px Chinese characters in IE:
When completing the em conversion, I also discovered a strange phenomenon, that is, the 12px (1.2em) Chinese characters obtained by the above method are not equivalent to the fonts defined directly with 12px in IE. size, but slightly larger. You only need to change 62.5% to 63% in the body selector and it will display normally. The reason may be that when IE processes Chinese characters, the accuracy of floating point values ​​is limited. This phenomenon only occurs for 12px Chinese characters and does not exist in English. The solution is to replace 62.5% in style.css with 63%.

2. rem characteristics

rem is a new relative unit (root em, root em) added to CSS3. This unit has attracted widespread attention. focus on. What is the difference between this unit and em? The difference is that when using 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 can be said to combine the advantages of relative size and absolute size. Through it, you can adjust all font sizes proportionally by modifying only the root element, and you can avoid 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 very simple, which is to write an additional absolute unit statement. These browsers ignore font sizes set with rem.

Example:

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

Note:

The choice of which font unit to use is mainly determined by your project. If your user base uses the latest version of the browser, it is recommended to use rem. If you want to consider compatibility, use px, or use both at the same time.

3. Font conversion table

The above is the detailed content of Compare the differences and connections between px, em, rem, and pt in css. For more information, please follow other related articles on the PHP Chinese website!