クリエイター:コーディング備忘録ブログ

コーディング

単位vw、vh

ブラウザのウィンドウの横幅や高さを指定出来る単位vw、vhを使えば、JavaScriptを使用しないで全画面表示を実装することが出来ます。

vw
ビューポートの幅の1/100
vh
ビューポートの高さの1/100

「vw」はビューポートの幅に基づき、サイズを決定します。ビューポートの幅は、ブラウザのスクロールバーを含むサイズで計算されます。
「vh」は要素をページの高さいっぱいにする時に使い、パーセントを使用するよりビューポートの単位が適しています。

フルスクリーンの背景
.test {
position: relative;
width: 100%;
height: 100vh;
background: url(‘background.jpg’) center/cover;
}

コメント

この記事へのコメントはありません。

RELATED

PAGE TOP