viewport units

[1/1]

  1. CSSのビューポート単位 vh/vw と % の違いを徹底解説! 使い分けのポイントも紹介
    これらの単位はそれぞれ異なる特性を持っており、適切な使い分けが重要となります。そこで今回は、vh/vwと%の違いについて、わかりやすく解説します。vh: ビューポートの高さを100%としたときの1%を表します。つまり、1vhはブラウザウィンドウの高さの1%に相当します。
  2. viewport-units を使ってデバイスの画面サイズに関係なくレイアウトを一定に保つ方法
    CSS3 の 100vh は、画面の高さの 100% を表す単位です。しかし、モバイルブラウザでは、アドレスバーやツールバーなどの UI 要素が画面の高さに含まれるため、100vh は一定ではなく、スクロールによって変化します。原因モバイルブラウザでは、画面の高さは、デバイスの物理的な高さではなく、ウィンドウの高さによって決定されます。ウィンドウの高さは、アドレスバーやツールバーなどの UI 要素によって変化するため、100vh も変化します。