鶏口牛後な日々

魔法使い(なんでも作れるエンジニア)を目指してます。ブログは発散中

vw, vh, vmin, vmax覚書と、使う時の注意点

vw, vh, vmin, vmax、これらは何か?

これらの、全てについている v は、 viewportv です。

なので、表示しているデバイスの画面の大きさを基準にして、要素の widthheight を指定するのに使うことができます。

  • vw:viewport width ビューポートの幅に対する割合
  • vh:viewport height ビューポートの高さに対する割合
  • vmin:viewport minimum ビューポートの高さと幅のうち、値が小さい方に対する割合
  • vmax:viewport maximum ビューポートの高さと幅のうち、値が大きい方に対する割合

どういうところで使うと便利か?

昨今、PCにスマホタブレットに・・・とデバイスごとに色々設定しないといけないのが面倒ですよね。

このビューポートでの指定を使うと、 画面に対しての割合 となります。

モーダルの表示領域などの指定では、この指定方法が有効だと感じます。

使うときの注意点?

一方で、画面上の他の要素と関わりがあるものについて、ビューポートを使うと、画面の大きさ以上の指定してしまうことがあります。

スマホ画面を作っていて、なぜか横スクロールが起きてしまうことなどがあり、よく調べたところ、ビューポートで指定をしてしまっていました。

こういう時は、従来通りの % を使うべきでした。

どちらだけでいいというわけではなく、使い所を心得て、使うべきだとわかりました。