こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

投稿日時 - 2018-03-20 00:35:35

QNo.9479663

すぐに回答ほしいです

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

少し誤解がありますね。"vw" と "vh" はそれぞれ「viewport width」と「viewport height」の頭文字を取った単位で、そのページの画面サイズを "100vw/100vh" と換算した場合の割合で表示する際に使う単位です。"%" と混同しがちですが、%はその要素の親要素のサイズpx数を100%と換算した場合の割合になるため、確実に画面サイズに比例したサイズ設定を使いたい場合に用います。

従ってまず最初にHTMLが表示される画面サイズが全ての基準になります。これは固定値にはならず、各々User各位の使用ブラウザ環境などで変化します。厳密には画面サイズの事ではありませんが、運用上はほぼイコールと考えて問題ありません。

例えばスマホのiPhoneXの場合、縦画面時の横幅サイズは375pxとなるため。この375pxが100vwとなります。これを基準に換算式を考えると…

> 1px = 100vw / 375px = 0.26666... ≒ 0.2667vw

~以上の様な変換式となります。

投稿日時 - 2018-03-20 04:14:28

補足

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

投稿日時 - 2018-03-20 16:49:45

お礼

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

投稿日時 - 2018-03-20 18:42:06

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問