今回は、以前 vw、vhを紹介した記事では割愛した vmax、vmin について。
実際に使う機会があったのでまとめました。
ちなみに、以前の記事はこちらから。
【CSS】要素の幅や高さを指定する単位vw、vhとは
https://cpoint-lab.co.jp/article/201804/【css】要素の幅や高さを指定する単位vw、vhとは/
さて、具体的に説明すると下記のとおりです。
| vmin (viewport minimum) | ウィンドウの幅と高さのうち、値が小さい方に対する割合 |
| vmax (viewport max) | ウィンドウの幅と高さのうち、値が大きい方に対する割合 |
具体的には下記のように記述します。
div {
width: 30vmax;
height: 30vmax;
}
上記のように指定すると、PCなどの横長のブラウザで見た場合、ウィンドウの縦横の長い方の長さに合わせて、DIV要素のサイズが変化します。
なお、今回は 30vmax なので、ウィンドウサイズの長い方の長さの 30% のサイズで表示されます。
これを使えば、例えばスマートフォンで、正方形の要素を2つ並べたい！というときに使えます。
意外と高さの指定って難しいので、今後重宝しそうです。
ということで、要素の幅・高さを指定する単位 vmin、vmax の使い方でした。
是非ご参考にしてください。
