• viewportとは
    • ブラウザウィンドウの表示領域のこと
    • 端末によってブラウザウィンドウの大小が異なる=viewportが異なる
  • CSSにおける単位指定
    • 主流はpx, em, % (remもありますが、これはまた今度ご紹介する予定)
    • 要素の幅や高さを指定する時に使う
  • viewportパーセンテージによる指定
    • viewport width(vw), viewport height(vh), viewport minimum(vmin), viewport maximum(vmax)の4つの指定方法がある
    • 私は今のプロジェクトでvhを使って、背景画像を表示している
    • height: 100vh;と指定することで、表示領域の大小に関わらず高さを100%、つまり画面いっぱいに表示させている
    • 親要素に関係なく表示領域に対して指定できるところ、JavaScriptで動的な処理をする必要がないところが便利
    • Androidはバージョン4.4以上じゃないと機能しないため、対象ブラウザに注意が必要
  • 参考リンク