Cssの新しい単位vw, vh, vmin, vmax

Viewport

今までの%ではなく新しい単位があります。

  • vw viewport width ビューポートの幅に対する割合
  • vh viewport height ビューポートの高さに対する割合
  • vmin viewport minimum ビューポートの幅と高さのうち、値が小さい方に対する割合
  • vmax viewport max ビューポートの幅と高さのうち、値が大きい方に対する割合

vw/vh/vmin/vmaxとは?

%と同じように、100vh/100vwは画面に対して100%で表示されます。

%との大きな違いは、height=高さに対して、
「height:100vw」と設定できます。
横幅100%に合わせて高さを指定できる事ができます。
画像の基準を高さにするか?
横幅にするか?
これを指定できることにより画像の見せ方を決める事ができます。

 


どの場面で使用するか?

サイトのメイン画像を、立ていっぱいに表示したい時!!
スマホで開いた時に、画像が下までいっぱいに表示させたい場合などに使用します。

セクション単位で移動

各セクションをページいっぱいに表示させ、Javascriptを加えることで
1ページづつスクロールする事ができます。

 

参考:コリス

Commentsこの記事についたコメント

%d人のブロガーが「いいね」をつけました。