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> |
参考：コリス
