Viewport
今までの%ではなく新しい単位があります。
- vw viewport width ビューポートの幅に対する割合
- vh viewport height ビューポートの高さに対する割合
- vmin viewport minimum ビューポートの幅と高さのうち、値が小さい方に対する割合
- vmax viewport max ビューポートの幅と高さのうち、値が大きい方に対する割合
vw/vh/vmin/vmaxとは?
%と同じように、100vh/100vwは画面に対して100%で表示されます。
%との大きな違いは、height=高さに対して、
「height:100vw」と設定できます。
横幅100%に合わせて高さを指定できる事ができます。
画像の基準を高さにするか?
横幅にするか?
これを指定できることにより画像の見せ方を決める事ができます。
どの場面で使用するか?
サイトのメイン画像を、立ていっぱいに表示したい時!!
スマホで開いた時に、画像が下までいっぱいに表示させたい場合などに使用します。
1 2 3 |
.sample { height: 100vh; } |
セクション単位で移動
各セクションをページいっぱいに表示させ、Javascriptを加えることで
1ページづつスクロールする事ができます。
1 2 3 4 |
.section { width: 100%; height: 100vh; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $('nav').on('click', function() { if ( $(this).hasClass('down') ) { var movePos = $(window).scrollTop() + $(window).height(); } if ( $(this).hasClass('up') ) { var movePos = $(window).scrollTop() - $(window).height(); } $('html, body').animate({ scrollTop: movePos }, 1000); }) </script> |
参考:コリス