viewport単位計算機
画面のサイズから、vw・vh・vmin・vmaxを、pxに変換します。pxからも、各単位に変換できます。
pxにすると—
計算式
- 1vw = 画面の幅の1%、1vh = 画面の高さの1%
- vmin = 幅と高さの小さいほう、vmax = 大きいほう
使い方のヒント
スマホでは、ブラウザのアドレスバーの出入りで、vhが変わって見えることがあります。その場合は、dvh・svh・lvhなどの新しい単位を使うと、意図した高さになります。
計算例
初期値(画面の幅 1,440 px、画面の高さ 900 px、単位つきの値 50、単位 vw、pxの値(逆の変換) 720 px)のままで計算すると、pxにするとは 720 px、pxの値は vw では 50 vw、pxの値は vh では 80 vh、pxの値は vmin では 80 vmin、pxの値は vmax では 50 vmax になります。まずはこの値を基準に、自分の数値へ置き換えて確認してください。
たとえば「画面の幅」だけを 2,880 px に変えると、pxにするとは 1,440 px、pxの値は vw では 25 vw、pxの値は vh では 80 vh、pxの値は vmin では 80 vmin、pxの値は vmax では 25 vmax になります。結果がどの入力にどれだけ敏感かを見るときは、入力を1つずつ動かして比べるとわかりやすくなります。
関連ツール
よくある質問
viewport単位計算機では何がわかりますか？
画面のサイズから、vw・vh・vmin・vmaxを、pxに変換します。pxからも、各単位に変換できます。
何を入力すればいいですか？
次の項目を入力します: 画面の幅、画面の高さ、単位つきの値、単位、pxの値(逆の変換)。内容を変えると、結果もそれに合わせて変わります。
結果にはどんな項目が表示されますか？
「pxにすると」「pxの値は vw で」「pxの値は vh で」「pxの値は vmin で」「pxの値は vmax で」などが表示されます。
どんな計算式を使っていますか？
ページ内の「計算式」にまとめています。たとえば「1vw = 画面の幅の1%、1vh = 画面の高さの1%」のような式です。
結果はどのくらい正確ですか？
処理は標準的な仕様に沿っています。本番で使う前に、実際の環境(ブラウザ・OS・言語)で動作を確認してください。
同じカテゴリ(CSS・単位)の他のツールはありますか？
はい。CSS単位変換機、px→rem計算機、CSS clamp計算機、CSSサイズ計算機などがあります。
スマホでの利用、入力内容の扱い、結果のコピー、印刷など、全ツールに共通する質問は共通のよくある質問にまとめています。