- 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以上じゃないと機能しないため、対象ブラウザに注意が必要
- 参考リンク