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;
}
この記事が気に入ったらサポートをしてみませんか?