The difference between EM and px in the "technology" CSS

EM refers to the high font, any browser default font height is 16px. So the unmodified browser is compliant with: 1EM=16PX. So 12px=0.75em, 10px=0.625em. To simplify the conversion of font-size, you need to declare it in the body selector in the CSSbody{font-size:62.5%;}, which makes the EM value 16px*62.5%=10px, so 12px=1.2em, 10px=1em, that is, you just need to divide your original PX value by 10, and then put the EM as the unit on the line. EM has the following characteristics:
1. The value of EM is not fixed;
2. Em inherits the font size of the parent element.

Rewrite steps:
1. declaration in the Body selectorbody{font-size:62.5%;}
2. Divide your original PX value by 10 and then replace it with EM as the unitp {font-size:1.2em;}；
Simply put, if you only need the above two steps to solve the problem, probably no one will use PX. After these two steps, you will find that your website font is too big to imagine. Because the value of EM is not fixed and inherits the size of the parent element, you might set the font size to 1.2em, or 12px, in the content div. Then you set the selector p font size 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 the content is set to 1.2em, the EM value inherits the size of the body of its parent element, which is 16px *62.5% * 1.2=12px, and P as its child, and EM inherits the content's font height, which is 12px. So the 1.2em of P is no longer 12px, but 14.4px.
3. Recalculate the EM values of the enlarged fonts. Avoid duplicate declaration of font size, that is to avoid the above mentioned 1.2 * 1.2=1.44 phenomenon. For example, when you declare a font size of 1.2em in #content, you can only have 1em when declaring the font size of p, not 1.2em, because this em is not em, it becomes 1em=12px because it inherits the font height of #content.