vw, vh, vmin, vmax覚書と、使う時の注意点
vw, vh, vmin, vmax、これらは何か？
これらの、全てについている v は、 viewport の v です。
なので、表示しているデバイスの画面の大きさを基準にして、要素の width や height を指定するのに使うことができます。
- vw：viewport width ビューポートの幅に対する割合
- vh：viewport height ビューポートの高さに対する割合
- vmin：viewport minimum ビューポートの高さと幅のうち、値が小さい方に対する割合
- vmax：viewport maximum ビューポートの高さと幅のうち、値が大きい方に対する割合
どういうところで使うと便利か？
昨今、PCにスマホにタブレットに・・・とデバイスごとに色々設定しないといけないのが面倒ですよね。
このビューポートでの指定を使うと、 画面に対しての割合 となります。
モーダルの表示領域などの指定では、この指定方法が有効だと感じます。
使うときの注意点？
一方で、画面上の他の要素と関わりがあるものについて、ビューポートを使うと、画面の大きさ以上の指定してしまうことがあります。
スマホ画面を作っていて、なぜか横スクロールが起きてしまうことなどがあり、よく調べたところ、ビューポートで指定をしてしまっていました。
こういう時は、従来通りの % を使うべきでした。
どちらだけでいいというわけではなく、使い所を心得て、使うべきだとわかりました。
