CSSで要素の単位の違い【備忘録】

CSS単位の指定

【px】ピクセル。画素数
【%】親要素に対する割合
【vh】ビューポート（画面サイズ）の高さに対する割合。100vhは画面の高さと同じ（100%）を表す
【vw】ビューポートの幅に対する割合
【vmin】画面の高さか幅の小さい方に対する割合
【vmax】画面の高さか幅の大きい方に対する割合

【注意点】100（vw・vh）と100%の違い

（vw・vh）は（画面サイズ）に対しての割合。それに対して100%は親要素に対する割合のため注意が必要。

例題

.backtop {
 margin: 0;
 
 -----画面サイズに対しての割合になる-----
 width: 80vw;　←「ビューポートが 1000px だとしたら、画像の幅は 800px になる」
 height: 100vh;
 ---------------------------------
 
 background-image: 
   linear-gradient(140deg, 
     #00f3ffA0, 
     #0028b960 40%, 
     #00f3ff60 60%, 
     #00f3ffA0), 
   url("https://mainphoto.png");
 background-repeat: no-repeat;
 background-position: center;
 animation: move 20s infinite both;
}