ひとりCSS Advent Calendar 2022 8日目です。
最近いろいろと増えたCSSで使える長さの単位をまとめてみました。
絶対値
- px - ピクセル
- pt - ポイント
- pc - パイカ
- in - インチ
- cm - 96px/2.54 = 1cm
- mm
- Q - 1cm/40 = 1Q(0.25mm)
相対値
文字
- em - 親要素のフォントサイズ
- ex - その要素のフォントの文字 x の高さ
- ch - その要素のフォントの文字 0 の幅
- rem - ルート要素のフォントサイズ
- lh - その要素の line-height プロパティと同じ
ビューポート
- vw - ビューポート幅の1%
- vh - ビューポート高さの1%
- vmin - ビューポート幅と高さを比べて小さい方の1%
- vmax - ビューポート幅と高さを比べて大きい方の1%
以下の単位が追加になった。
例えば主にiOS Safariの挙動に対応できる。
- Large Viewport
- アドレスバーやツールバーなどがすべて縮まっていたり非表示になり、画面がいちばん広いときのサイズ
- lvw, lvh, lvmin, lvmax
- Small Viewport
- アドレスバーやツールバーなどがすべて表示されて画面がいちばん狭いときのサイズ
- svw, svh, svmin, svmax
- Dynamic Viewport
- 動的に変わるユーザーエージェントに依存するUIを考慮してサイズが設定される
- dvw, dvh, dvmin, dvmax
まとめ
- 紙の単位もあるの知らなかった
- どの状態でも高さいっぱいにしたいときは
100dvhと書けば良さそう