Concept introduction:

1, px (pixel, pixel) :

Dots Per Inch (DPI) is a virtual unit of length used in a digital image of a computer system. If you want to convert PX to physical length, you need to specify the precision DPI(Dots Per Inch), which is usually optional during scanning and printing. The default value is 96dpi for Windows and 72dpi for Apple.

Em (unit of length relative to the font size of the text in the current object) :

A unit of relative length, originally the width of the letter M, hence the name em. It is a multiple of the character width, similar to percentage, for example: 0.8em, 1.2em,2em, etc. Usually 1 em = 16 px.

3, PT (Point, LBS) :

A unit of physical length, 1/72 of an inch. Pt =1/72(inch), px=1/dpi(inch)

Rem (root EM) :

CSS3 is a new relative unit, this unit caused widespread concern. What’s the difference between this unit and EM? The difference is that when REM is used to set the font size for the element, the font size is still relative, but relative only to the HTML root element. This unit combines the best of both relative and absolute size, allowing you to scale all font sizes by changing only the root element, while avoiding the cascading effect of font sizes being compounded layer by layer. Rem is now supported by all browsers except IE8 and earlier. For browsers that don’t support it, the solution is simply to write an additional declaration of absolute units. These browsers ignore the font size set with REM.

1. Em and PX

What is PX?

Px Pixel. A unit of relative length. Pixel PX is relative to the screen resolution of the monitor. Em is a unit of relative length. Font size relative to the text in the current object. If the current font size for inline text has not been manually set, it is relative to the browser’s default font size. (quoted from CS 2.0 manual) PX features

  1. IE cannot adjust font sizes that use PX as a unit;
  2. Most foreign websites can be adjusted because they use EM or REM as font units;
  3. Firefox can adjust PX, EM, rem, but more than 96% of Chinese Internet users use Internet Explorer (or kernel).
What is EM?

Em refers to font height. The default font height for any browser is 16px. So all untuned browsers fit: 1em=16px. 12px=0.75em, 10px=0.625em. To simplify font size conversion, declare font size=62.5% in the BODY selector in CSS, This changes the em value to 16px*62.5%=10px, so 12px=1.2em and 10px=1em, which means just divide your original px value by 10 and replace it with em.

Em features:

1em refers to the size of a font, which inherits the font size of the parent element and is therefore not a fixed value. The default font size for any browser is 16px. Therefore, 12px = 0.75em. In practice, to facilitate conversion, the following styles are usually set: CSS code

HTML {the font - size: 62.5%; }Copy the code

So 1em = 10px. The 1.2em we usually use is theoretically 12px. However, this conversion does not work in Internet Explorer, where 1.2em is slightly larger than 12px. The solution is to change the HTML tag style from 62.5% to 63%, i.e. CSS code

html { font-size: 63%; }
Copy the code

In Chinese texts, there are usually two Spaces at the beginning of a paragraph. If you use px as a unit, you need to leave 24px blank for 12px and 28px blank for 14px… This is a very inefficient way of converting. This problem is easily solved by using em units, where one word is 1EM and two words are 2EM. So, you only need to define it this way: CSS code

p { text-indent: 2em; }
Copy the code

Difference between em and PX font units

Font units should be em instead of PX. The simple reason is that font scaling in IE6 is supported. If you press CTRL + scroll on a page, sites with fonts in PX units will not respond. Px is absolute, IE scaling is not supported, em is relative. When I was adjusting this blog, I found that I used EM not only for font, but also for line height and vertical height. Ensure integrity when scaling.

Em has the following characteristics:
  1. The em value is not fixed;
  2. Em inherits the font size of the parent element.
Em rewrite steps:
  1. Font-size=62.5%;
  2. Divide your original px by 10 and replace it with em; Keep it simple. If the above two steps were all that was needed to solve the problem, no one would use PX. After the above two steps, you will find that your website font size is beyond imagination. Because em values are variable and inherit the size of the parent element, you might want to set the font size to 1.2em, or 12px, in the Content div. Then you set the font size of selector P to 1.2em as well, 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 the content is set to 1.2em, which inherits the size of its parent element body, 16px * 62.5% * 1.2=12px, and p as its child, em inherits the font height of the Content, 12px. So the 1.2em of p is no longer 12px, but 14.4px.
  3. Recalculate em values for fonts that have been enlarged. Avoid repeated font size declarations, such as 1.2 * 1.2= 1.44 mentioned above. For example, if you declare a font size of 1.2em in #content, then the font size for p must be 1em, not 1.2em, because this em is different from that em, which is changed to 1em=12px by inheriting the height of the #content font.
12px Chinese characters in IE:

Another weird thing that I noticed when I finished em conversion was that the 12px(1.2em) Chinese characters obtained by the above method did not match the font size defined by 12px in IE, but were slightly larger. You just need to change 62.5% to 63% in the body selector and it will work. The reason may be that WHEN DEALING with Chinese characters, IE has a limit on the accuracy of floating point values. This phenomenon only occurs in 12px Chinese characters, not in English. The solution is to change 62.5% of style.css to 63%.

A px, EM, PT unit conversion tool:

Address: pxtoem.com/

2. Rem characteristics

Rem is a relative unit (root EM) added to CSS3, which has attracted a lot of attention. What’s the difference between this unit and EM? The difference is that when REM is used to set the font size for the element, the font size is still relative, but relative only to the HTML root element. This unit combines the best of both relative and absolute size, allowing you to scale all font sizes by changing only the root element, while avoiding the cascading effect of font sizes being compounded layer by layer. Rem is now supported by all browsers except IE8 and earlier. For browsers that don’t support it, the solution is simply to write an additional declaration of absolute units. These browsers ignore the font size set with REM. For example:

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

Note: The choice of font units is largely up to your project, rem is recommended if your user base is using the latest version of the browser, PX is recommended for compatibility, or both.

3. Font conversion table

The shop name pt px em
At the beginning, 42pt 56px 3.5 em
At the beginning of a small 36pt 48px 3em
34pt 45px 2.75 em
32pt 42px 2.55 em
30pt 40px 2.45 em
29pt 38px 2.35 em
28pt 37px 2.3 em
27pt 36px 2.25 em
A no. 26pt 35px 2.2 em
25pt 34px 2.125 em
The little one 24pt 32px 2em
No. 2, 22pt 29px 1.8 em
20pt 26px 1.6 em
Small 2 18pt 24px 1.5 em
17pt 23px 1.45 em
No. 3 16pt 22px 1.4 em
Small three 15pt 21px 1.3 em
14.5 pt 20px 1.25 em
No. 4 14pt 19px 1.2 em
13.5 pt 18px 1.125 em
13pt 17px 1.05 em
Small four 12pt 16px 1em
11pt 15px 0.95 em
No. 5 10.5 pt 14px 0.875 em
10pt 13px 0.8 em
Small five 9pt 12px 0.75 em
8pt 11px 0.7 em
No. 6 7.5 pt 10px 0.625 em
7pt 9px 0.55 em
Small six 6.5 pt 8px 0.5 em
No. 7 5.5 pt 7px 0.4375 em
No. 8 5pt 6px 0.375 em