移行中の知識
ビューポート単位
Viewport Units
定義
ビューポート単位（viewport units）とは、viewportの寸法を基準に長さを表すCSSのrelative unit群です。`vw` / `vh`などのdefault viewport unitsに加え、mobile browserの動的なbrowser UIによって利用可能な領域が変わる状況を扱うため、small viewport (`sv*`)、large viewport (`lv*`)、dynamic viewport (`dv*`) に対応するunitがあります。viewportへ比例させること自体が目的ではなく、何の領域変化へ追従させたいかに応じて使い分けます。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
mobile landing page
smartphoneのfull-height Heroをbrowser UI込みで確認する
見るポイント
`100vh`だけで「常に現在見えている高さ」と決めつけず、address bar等のbrowser UIが展開・収納された時にHeroやCTAが隠れたり不自然に跳ねたりしないかを見る。small / large / dynamic viewportのどの基準が目的に合うかを選ぶ。
desktop responsive art direction
PCでwindowを狭めても寸法を無制限に追従させない
見るポイント
headingや余白をviewport幅だけへ比例させるとwide monitorで過大、narrow windowで過小になりうる。viewport unitを使う場合もmin/max constraintやfont-relative unitと組み合わせ、読みやすさと階層を確認する。
注意
誤解しやすい点
- `100vh`をすべてのmobile browserで常に現在の可視高さと同じだと考える。
- viewport unitを使えば自動的にresponsiveになると考え、contentのmin/max constraintやbreakpointを検討しない。
- font-sizeをviewport幅だけへ比例させ、userのtext resizingや極端なviewport幅での可読性を確認しない。
関連
関連する概念
出典