1つの値をpx⇔vwで計算する
基準幅と値を入れると、pxとvwを相互に計算します。
pxからvwへの計算式
vw ＝ px ÷ 基準幅(px) × 100
px ＝ vw × 基準幅(px) ÷ 100
vwは「ブラウザの表示幅（ビューポート幅）の1%」を表す単位です。基準幅375pxのデザインなら、16pxは 16 ÷ 375 × 100 ＝ 約4.267vw になります。
早見表（よく使う値）
| px | 基準幅 375px | 基準幅 390px | 基準幅 1440px |
|---|
使い方
- 「Base」にデザインカンプの横幅（例：375）を入力します。
- 左のテキストエリアに、変換したいCSSをそのまま貼り付けます。
- 右のテキストエリアに、pxをvwに置き換えたCSSが表示されるので、コピーして使います。
calc() の中のpxにも対応しています。
よくある質問
- pxからvwへの計算方法は？
- vw ＝ px ÷ 基準となる画面幅(px) × 100 で計算します。例えば基準幅375pxで16pxをvwにすると、16 ÷ 375 × 100 ＝ 約4.267vw です。
- vwからpxに戻す（逆算する）には？
- px ＝ vw × 基準となる画面幅(px) ÷ 100 で計算します。例えば基準幅375pxで4vwは、4 × 375 ÷ 100 ＝ 15px です。
- 基準幅は何pxにすればいいですか？
- デザインカンプの横幅に合わせるのが基本です。スマートフォンなら375pxや390px、PCなら1440pxや1920pxがよく使われます。
- 1vwとは何pxですか？
- 1vwはブラウザの表示幅（ビューポート幅）の1%です。画面幅375pxなら1vw＝3.75px、1440pxなら1vw＝14.4pxになります。
関連記事
このツールについて
長野県上田市のWeb制作会社、株式会社Cruw（クルー）が制作・運営しています。無料・広告なしでご自由にお使いください。ホームページ制作やシステム開発のご相談はお問い合わせからどうぞ。