Talking about the difference between unit px and Em,rem in CSS-reprint

PX is the smallest point that your screen device can physically display, which is not a fixed width, and the length and width of points on different devices may vary.
Assume: You are now using a monitor on a 1px wide =1 mm, but I use the monitor 1px wide = two mm, then you define a div width of 100px, you see on the monitor that this div is 10 cm, I see on the monitor is 20 centimeters.
The width of the other PX point is not necessarily a 1:1 square, and some devices have a different aspect ratio.

EM size: The default font size for all modern browsers is 16px, then 1em=16px. Then you manually define the body inside the font-size:12px, (the browser default 16px is changed to small),
Now 1em=12px, if the 0.8em is actually equal to the use of 12px*0.8;em is you want the entire Web page font unification becomes big and small you just change the body inside the Font-size value is OK.

Additionally: EM inherits the font size of the parent element, such as:
body{font-size:16px;}
P{font-size:0.75em;}
Span{font-size:2em;}

My size is 16px;
<p>
  Paragraph text size is 12px (16*0.75);
  <span>
    My size is 2em, that is 24px, here is relative to the parent font size * *, not relative to the body inside the 16px
  </span>
</p>

Rem,em relative to the parent, nesting a lot of the count of how big the font is very fucked, so with REM (browser support is not ideal),
He is only relative to the font size of the HTML or body (default or 16PX, unless you define it yourself with font-size), without the relationship of inheriting the parent dimension.

Talking about the difference between unit px and Em,rem in CSS-reprint