EMからPXへの換算 — px・em・rem
em・remからpx、pxからem・remを換算します。ルートと親要素の文字サイズを指定して、入れ子による違いを確認できます。
計算式と出典の更新 · 出典 · 1アルゴリズム・定数・初期入力を確認(JSON)
この計算機について
font-sizeではemは継承した親の文字サイズ、remはルートの文字サイズを使います。ルートが16 px、親の倍率が0.8なら親は12.8 pxなので、1.5 emは19.2 px、1.5 remは24 pxです。相対値を入力するにはemかrem、逆方向の換算にはpxを選んでください。
計算例
下記の既定値を用いた計算結果
入力単位 px · ルートフォントサイズ 16 px · 変換するピクセルサイズ 24 px · 換算するサイズ 1.5 · ルートに対する親の倍率 1 × · タイプスケール比 長3度(1.25) · 目盛りの段数 5 em単位のサイズ 1.5000 em · rem単位のサイズ 1.5000 rem · ルートemでの換算値 1.5000 em · ピクセルの結果 24.00 px · ルートサイズからのタイプスケール +4: 39.06 px / 2.441 rem | +3: 31.25 px / 1.953 rem | +2: 25.00 px / 1.563 rem | +1: 20.00 px / 1.250 rem | 基準 0: 16.00 px / 1.000 rem · メモ 親サイズが 1 em の場合、em と rem は同じです
出典
免責事項
本計算ツールは一般的な概算を提供します。サイズ・価格・在庫・規格はブランド、販売店、国によって異なります。結果は出発点として扱い、販売店や所管機関が公表する数値と照合してください。
実装の出典
この記録は本ページの実装を示し、独立した検証を意味しません。外部資料は明示された式や定義のみを裏付けます。推定や独自ルールにはそれぞれの前提があります。
式と変数
em = px ÷ (b × ep); rem = px ÷ b; px = em × b × ep = rem × b; px_i = b × r^i (i = 0 … steps − 1)
- px
- ピクセル値
- b
- ルートの文字サイズ(px)
- ep
- ルートに対する親の倍率
- em
- 親に対するサイズ
- rem
- ルートに対するサイズ
- r
- スケール比率
- px_i
- 各段階のピクセル値
- steps
- スケールの段数
font-sizeではemは継承した親の文字サイズ、remはルートの文字サイズを使います。ルートが16 px、親の倍率が0.8なら親は12.8 pxなので、1.5 emは19.2 px、1.5 remは24 pxです。相対値を入力するにはemかrem、逆方向の換算にはpxを選んでください。
よくある質問
この換算ツールでネストしたemがremと異なるのはなぜですか?
remは常にルートフォントサイズの16 pxを基準とするため、1.5 remはどこにあっても24 pxです。emは親のサイズと合成され、本換算ツールはピクセルサイズに親の係数を掛けるため、0.8 emの親の中で24 pxの値はネスト文脈での合成emでは19.2 pxになります。同じ入力でも、ネストした出力が単純なemより小さくなるのはこのためです。
親要素とルートの文字サイズはem換算にどう影響しますか?
font-sizeではemは継承した親の文字サイズ、remはルートの文字サイズを使います。ルートが16 px、親の倍率が0.8なら親は12.8 pxなので、1.5 emは19.2 px、1.5 remは24 pxです。相対値を入力するにはemかrem、逆方向の換算にはpxを選んでください。