px / rem / em / vw を相互換算
px、rem、em、vw、vh、% を相互変換。ルートフォントサイズとビューポート幅を指定すると、デザインシステムに近い数値で計算できます。
rem はルートフォント、vw と % はビューポート幅を参照。
Figma は px、実装は rem、という現場で電卓を開かずに済みます。
vw / vh は画面幅に依存するので、設計中のブレークポイント幅を入れてください。
使い方
- 数値と変換元・先の単位を選ぶ
- ルートフォントとビューポート幅を確認
- 結果を CSS にコピー
こんなときに
- 根 16 以外で rem を間違えがち
- 40vw が何 px かざっと知りたい
- 登録不要ですぐ試せる
シーン
- デザインの px 間隔を rem に
- ノート PC 幅での vw 確認
- rem と em の違いを数字で説明
ヒント
- em は簡便のため親＝ルートとしています。コンポーネントの font-size が違う場合は調整を。
- 往復変換で小数の誤差が出ることはあります。CSS では通常問題になりません。
例
| 入力 | 出力 | 備考 |
|---|---|---|
| 16px → rem（根 16） | 1rem | — |
| 1280px 幅で 50vw | 640px | — |
よくある質問
- rem の基準は？
- ここで指定したルートフォントサイズ（多くは 16px）。html の font-size が違うなら合わせてください。
- % と vw は同じ？
- 必ずしも同じではありません。ここでは % もビューポート幅を参照幅として近似します。