原初の定義(vh, vw がない頃)

• height: 100px; width: 100px; とか値を直接指定したら、そのサイズになるのは当然。
• 一方 height: y%, width: x% と比率指定した時、何を基準として y%, x% となるのかが問題となる。
• 親要素の height, width が基準とされた。
• となると、「画面全体のサイズ」基準を示すためには、その要素の親にあたる要素すべてが height: 100%; width: 100% でなければ実現できない。
  • 意図的に要素のツリーを分けて作る必要がある。

vh, vw の誕生

• これでは困るために、「ビューポート」に対する割合を示す vh, vw という単位が考え出された。
• CSS3 より導入。
• これにより、要素の親子に関係なく、画面全体のサイズ基準で比率指定できるようになった。

vh, vw による画面全体指定の問題

• しかし、「ビューポート」の定義が安定していない。以下の要素を含むか含まないかでブレが生じている。
  • アドレスバー
  • ツールバー
  • スクロールバー
• このため、単純に100vh, 100vw と指定しても、画面からはみ出す、という問題が発生している。
• vh, vw が示すビューポートにはアドレスバー、ツールバー、スクロールバーなどを含まないのが理想的。
• アドレスバー、ツールバー、スクロールバーなどは状況によって表示の有無が変わるため、変化時には再レイアウトの必要がある。
  • これは状況によっては振動を引き起こす。(例えばスクロールバーはレイアウトしたものがはみ出るかどうかで変わってしまうため)

vmin, vmax の誕生

• PCのモニタではほぼ固定的だった画面の縦横サイズだが、スマートフォンでは、画面を傾けるのが容易なため、縦横(ランドスケープ(横長)とポートレート(縦長))が頻繁に変化する。
• このため、それに合わせたサイズ指定として vmin, vmax という単位が必要となった。
• vmin は縦横の短い方、vmax は縦横の長い方