Before I heard people say, the website production of font units should use EM instead of px, why? The simple reason is that EM supports font scaling under IE6, press CTRL + SCROLL wheel in the page, and the Web site with the PX unit does not respond. PX is an absolute unit that does not support IE scaling, while EM is a relative unit that supports font scaling.
And REM is a better thing. If there is no IE8-compatible concern (REM requires ie8+ support, REM is suitable for multilingual templates), REM can be said to be a very desirable unit. REM and EM are the same relative units, just different from EM relative to the parent element, Rem relative to the root element html, i.e. root em.
We often see html{font-size:62.5% in web design;} Why is this setting 62.5%? This is mainly to facilitate the conversion between the EM and PX, the initial value of EM is 1em=16px, when set html{font-size:62.5%;} , 1em =16px*62.5%=10px,1.2em is =12px, so it is much simpler and clearer.
Summary: REM is a relatively flat, cascaded unit of computing based on the root element , typically for scenes that require overall resizing of the font, such as a multilingual website.
The relationship of Px,em,rem