The difference between EM and rem in CSS

The maximum unit length in CSS is px, EM, REM, the three differences are:

PX is a fixed pixel, and once set it cannot be changed to fit the page size.

Em and REM are more flexible relative to PX, they are relative length units, meaning the length is not dead, and more suitable for responsive layouts.

The difference between EM and REM is summed up in a nutshell:em relative to the parent element, Rem relative to the root element.

The R in rem means root (root), which is not difficult to understand.

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 (browser support is not ideal), he is only relative to the HTML or body font size (default or 16PX, unless you define it yourself with font-size), there is no inheritance of the parent dimension of the relationship.

The difference between EM and rem in CSS