【CSS】要素の幅や高さを指定する単位vmin、vmaxとは

村上 著者:村上

【CSS】要素の幅や高さを指定する単位vmin、vmaxとは

今回は、以前 vw、vhを紹介した記事では割愛した vmaxvmin について。
実際に使う機会があったのでまとめました。

ちなみに、以前の記事はこちらから。

【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 の使い方でした。
是非ご参考にしてください。

  • この記事いいね! (0)

著者について

村上

村上 administrator