Webページでは、px、em、およびremを使用してサイズを示すことができますが、それらの間にはまだ違いがあり、それぞれに長所と短所があります。
pxは「絶対サイズ」を意味します。利点：要素のサイズと位置をpx単位で設定すると、より安定して正確になります。短所：ブラウザーのズームでは動的に変更できません。したがって、レスポンシブWebページでは、pxユニットを使用しないようにしてください。
emは「相対サイズ」の略で、デバイスの画面サイズによってサイズが変わる場合があるという利点があります。短所：現在のオブジェクトのフォントサイズを定義するには注意が必要です。定義されていない場合、サイズはブラウザのデフォルトのフォントサイズを基準にしています。
remはcss3に新しく追加された相対単位です。remの参照オブジェクトはルート要素<html>のフォントサイズであるため、ルート要素のフォントサイズを決定するだけで済みます。
ブラウザでは、デフォルトのフォントサイズは16pxです。未調整のブラウザでは、1em = 16pxです。htmlノードのフォントを変更すると、1em =変更されたフォントサイズになります。
注：emのもう1つの機能は継承です。子ノードは親ノードのフォントサイズを継承します。
remでは、すべてのノードがルートHTMLノードのフォントサイズを継承します。HTMLルートノードのフォントサイズが設定されている場合、ページ上の他のすべてのノードのフォントサイズは1remです=現在のHTMLルートノードはピクセルサイズを定義します
注：ブラウザーの最小フォントサイズは12pxです。したがって、フォントサイズが10pxに設定されている場合、1remは12pxに等しく、1.2remは12pxに等しくなります。
Webページでは、計算の便宜上、「62.5」を使用して問題を解決します。
html {font-size：62.5％} / * = 10px * /
本文{font-size：1.4rem} / * = 14px * /
div {font-size：2.4rem} / * = 24px * /
実際のプロセスでは、一部のブラウザーはremユニットをサポートしません。次の改善を行うことができます。
html {font-size：62.5％}
体 {
font-size：14px;
font-size：1.4rem;
}
div {
font-size：24px;
font-size：2.4rem;
}
参照記事：https : //www.zcfy.cc/article/understanding-and-using-rem-units-in-css-1411.html