pxをremに変換する（逆も）

remはルートのフォントサイズに連動します。px値をremに直すとブラウザのズームやユーザー設定に追従するレイアウトになります。

このガイドで使う道具

デザイン指定が24pxの余白。読者がフォントサイズを上げたときに追従するよう、スタイルにはremで書きたい。変換自体は割り算1回で、大切なのは基準のルートサイズを正しく選ぶことです。

ブラウザ標準は16pxなので24pxは1.5remです。ただし `html { font-size: 62.5% }` —— 1rem=10pxにする定番の手法 —— を使うプロジェクトでは、先にルートを10へ変えないと結果がすべて1.6倍ずれます。

remは常にルート要素基準で、親のfont-sizeには影響されません。コンポーネント自身の文字サイズに連動させたい場合は別単位のemです。

1pxの境界線、画像由来の寸法、メディアクエリのブレークポイントはpxのままが一般的です。余白・文字・部品サイズをremに変え、それ以外はそのままにしてください。