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

1 Viewport
- 1.1 vw/vh/vmin/vmaxとは？
2 どの場面で使用するか？

Viewport

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

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

vw/vh/vmin/vmaxとは？

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

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

どの場面で使用するか？

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

.sample {
height: 100vh;
}

.sample {

height: 100vh;

}

セクション単位で移動

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

.section {
width: 100%;
height: 100vh;
}

.section {

width: 100%;

height: 100vh;

}

<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>