デザイン
px → rem / em 変換ツール
ベースサイズを設定してpxをrem・emに変換（逆変換も可能）。流体タイポグラフィとレスポンシブレイアウトに最適。
px
ブラウザのデフォルトは16px。プロジェクトで異なるベースを使用している場合は変更してください。
px → rem / em
ピクセル数を入力すると即座に計算されます。
px
rem / em → px
rem または em の値を入力すると、px換算値が即座に計算されます。
rem/em
px
クイックリファレンス表
ベース: 16px
| px | rem | em |
|---|
重要な概念
rem（root em）はルート要素（
<html>）のfont-sizeを基準とした単位です。16pxのベースでは1rem = 16px。ドキュメントのfont-sizeを変更するとすべてのrem値が比例してスケールするため、グローバルなレスポンシブデザインが簡単になります。
emは親要素の
font-size（またはfont-sizeに使う場合は要素自身）を基準とします。入れ子要素では複合効果が生じることがあります。remは常にルートを基準とするためその問題を回避します。自己完結したコンポーネント内のスペーシングやサイズ指定にはemが適していることもあります。
ピクセルは固定値であり、ブラウザのフォントサイズ設定を尊重しません。
remを使えば、ユーザーがブラウザのベースフォントサイズを大きくした場合にすべてのコンテンツが適切にスケールし、アクセシビリティが向上します。WCAG 1.4.4でも、テキストが機能を失わずに200%まで拡大できることが推奨されています。
html { font-size: 62.5%; }と設定して1rem = 10pxにするトリックを使うプロジェクトがあります（暗算が簡単になります）。フレームワークやCMSによって異なるベースが使われる場合もあります。ベースフィールドを使ってコンバーターをプロジェクトに合わせてください。