The difference between unit px and Em,rem in CSS

px Pixels (Pixel). Relative length units. Pixel px is relative to the screen resolution of the Monitor.

EM is the relative length unit. The font size relative to the text within the current object. If the font size of the current text in the row is not set artificially, it is relative to the browser's default font size.

The default font height for any browser is 16px. All the unadjusted browsers are compliant: 1EM=16PX. So 12px=0.75em,10px=0.625em. In order to simplify the conversion of font-size, it is necessary to declare font-size=62.5% in the body selector in CSS, which makes the EM value 16px*62.5%=10px, so 12px=1.2em, 10px=1em, That means you just have to divide your original PX value by 10, and then replace EM as the unit.

EM features:

1. The value of EM is not fixed;

2. Em inherits the font size of the parent element.

So when we write em, we need to be aware of two points:

1. The body selector declares the font-size=62.5%;

2. Divide your original PX value by 10, then replace EM as the unit;

3. Recalculate the EM values of the enlarged fonts. Avoid duplicate declarations of font size.

That is to avoid the 1.2 * 1.2 = 1.44 phenomenon. For example, if you declare a font size of 1.2em in #content, then you can only 1em when declaring P's font size, not 1.2em, because this em is not the other em, and it becomes 1em=12px because it continues to #content the font height.

But the exception of 12px Chinese characters is that the 12px (1.2em) size of Chinese characters obtained by the above method is not equal to the font size defined directly with 12px, but slightly larger. This problem Jorux has been resolved, only in the body selector in the 62.5% to 63% can be normal display. The reason may be that when IE deals with Chinese characters, the precision of floating-point values is limited. Don't know if there's any other explanation.

Rem is a new relative unit of CSS3 (root em, root em), a unit that has aroused widespread concern. What is the difference between this unit and EM? The difference is that when you use REM to set the font size for an element, it is still relative, but only relative to the HTML root element. This unit is a set of relative size and absolute size of the advantages in one, through which you can only modify the root element in proportion to adjust all the font size, but also to avoid the font size by layer compound chain reaction. Currently, all browsers support REM in addition to IE8 and earlier versions.