remからpxへの変換方法

remからピクセルへの逆変換

逆の公式も同様に単純です：

px = rem * ルートフォントサイズ

デフォルトの16pxベースの場合：

px = rem * 16

remからpxが必要な場面

remはほとんどのスタイリングに適していますが、実際のピクセル値が必要なシナリオがあります：

• Canvas描画 — Canvas APIはピクセル座標を使用するため、要素配置時にremをpxに変換する必要があります。
• JavaScript計算 — アニメーションやレイアウト計算では正確なピクセル値が必要です。
• サードパーティライブラリの制約 — 幅、高さ、オフセットなどの設定でピクセル値のみ受け付けるライブラリがあります。
• デザインレビュー — デザイナーはピクセル単位でレイアウトを指定することが多く、remを戻すことで実装の正確性を確認できます。

実用的な例

デザインシステムで--spacing-lgが1.5remの場合：

1.5 * 16 = 24px

JavaScriptでの計算値の読み取り

実行時に実際のルートフォントサイズを取得できます：

const rootFontSize = parseFloat(
  getComputedStyle(document.documentElement).fontSize
);
const pxValue = 1.5 * rootFontSize; // 例: 24

ユーザーがブラウザのデフォルトフォントサイズを変更している可能性があるため、1remが16pxではなく18pxや20pxになる場合があり、これは重要です。

クイックリファレンス（ベース16）

rem	px
0.25	4
0.5	8
0.75	12
1	16
1.25	20
1.5	24
2	32
3	48
4	64