PX から REM への変換

ルートフォントサイズを使って、CSS のピクセルと rem を変換します。

計算式画面・デザイン

REM

1 rem は、ルートの html 要素のフォントサイズに等しく、ブラウザの初期値では 16 px です。ピクセル値をルートサイズで割ると rem になり、rem にルートサイズを掛けるとピクセルになります。

em も同じ考え方ですが、親要素のフォントサイズを基準にするため、親要素がルートサイズを使っている場合にのみ rem と等しくなります。

CSS では、1 px は 1/96 インチ、1 pt は 1/72 インチと定義されているため、1 px = 0.75 pt です。

rem = px ÷ ルートサイズ
px = rem × ルートサイズ
pt = px × 0.75

初期値の 16 px がルートの場合、24 px は 24 ÷ 16 = 1.5 rem です。これは 18 pt で、ルートサイズの 150% です。

なぜ px ではなく rem を使うのですか？

ユーザーがブラウザの初期フォントサイズを変更すると、rem のサイズも比例して変わります。これはアクセシビリティに役立ちます。

rem と em の違いは何ですか？

rem はルート要素を基準にします。em は現在の要素の親を基準にするため、入れ子になった em の値は積み重なります。