• ベストアンサー

CSSでのpxをvwやvhに変換する計算方法

CSSでのpxをvwやvhに変換する計算方法を教えてください。

質問者が選んだベストアンサー

  • ベストアンサー
  • 4017B
  • ベストアンサー率73% (1337/1815)
回答No.1

少し誤解がありますね。"vw" と "vh" はそれぞれ「viewport width」と「viewport height」の頭文字を取った単位で、そのページの画面サイズを "100vw/100vh" と換算した場合の割合で表示する際に使う単位です。"%" と混同しがちですが、%はその要素の親要素のサイズpx数を100%と換算した場合の割合になるため、確実に画面サイズに比例したサイズ設定を使いたい場合に用います。 従ってまず最初にHTMLが表示される画面サイズが全ての基準になります。これは固定値にはならず、各々User各位の使用ブラウザ環境などで変化します。厳密には画面サイズの事ではありませんが、運用上はほぼイコールと考えて問題ありません。 例えばスマホのiPhoneXの場合、縦画面時の横幅サイズは375pxとなるため。この375pxが100vwとなります。これを基準に換算式を考えると… > 1px = 100vw / 375px = 0.26666... ≒ 0.2667vw ~以上の様な変換式となります。

noname#233773
質問者

お礼

ありがとうございます。勉強になります。

noname#233773
質問者

補足

ありがとうございます。勉強になります。

関連するQ&A

専門家に質問してみよう