今更の CSS レスポンシブに使える単位 vw, vh, vmin, vmax と計算する calc()

%, em, rem

% ... 親要素の値を 100% として計算する相対値。
em ... フォントサイズを基準にした単位。親要素の font-size を基準にする。
rem ... root em. ルート要素 (html) の font-size を基準とする。

%, em で指定している値の実際のサイズは親要素によって左右される。
rem で指定している値の実際のサイズは常に同じサイズになり、 html の font-size が変更されない限りはサイズは変わらない。

sample

See the Pen em, rem, % by KIKIKI (@chaika-design) on CodePen.

vw, vh, vmin, vmax

vw ... viewport の width を基準にした単位。ブラウザの横幅を 100vw とする。
vh ... viewport の height を基準にした単位。ブラウザの高さを 100vh とする。
vmin ... vw, vh の小さい方の値
vmax ... vw, vh の大きい方の値

sample

See the Pen vw, vh, vmin, vmax by KIKIKI (@chaika-design) on CodePen.

※ 画面幅を変えると変化がわかりやすいので、CodePenのページを開いたほうが良さそう

vw, vh 共に親要素のサイズ指定の影響は受けない。

画面のサイズによって大きさを変えることができるので、例えば画面幅 760px の時にフォントサイズを 16px にしたいみたいな場合は

16px / 760px = 0.02105 -> 2.105% => 2.105vw

のような計算で求められる。画面幅が大きくなればフォントサイズも大きくなり、画面幅が小さくなればフォントサイズも小さくなるので、そのまま拡大縮小させたいようなケースには良いと思うが、ある程度以上は大きくならない / 小さくならないというブレイクポイントでの制御は必要になると思う。

ブラウザのサイズを基準にしているので、width, height を同じ vw または vh で指定すればレスポンシブな正方形も作成できるが、padding-top: 100% を使った方がコントロールがしやすいようにも感じる。(実装したい用途にも拠るけど)

参考

calc

calculator (電卓)の calc。動的にサイズを計算するプロパティ。
vw から 1em 控えるとかも可能になる。(都度計算してるのでレンダリングコストは高そうな気がする)

注意事項

ゼロで除算を行うと、 HTML パーサーで生成されるエラーになります。

+ 演算子と - 演算子は前後に空白文字をつける必要があります。たとえば、 calc(50% -8px) と記述した場合、パーセント表記と負の長さが連続しているものとみなされ、無効な式となるからです。 calc(50% - 8px) はパーセント表記、減算記号、長さの順に並んでいるものと解釈されます。また、 calc(8px + -50%) は長さ、加算記号、負のパーセント表記の順に並んでいるものと解釈されます。

* 演算子と / 演算子には前後の空白文字は必要ありませんが、こちらにも空白文字を用い記述ルールに一貫性を持たせておくことは認められており、推奨されています。自動レイアウトおよび固定レイアウトのテーブルで列・列グループ・行・行グループ・セルの幅や高さに対してパーセンテージを含む数式を指定すると、 auto が指定されたものとして扱います。

calc() 関数を入れ子にすることは許可されており、内側のものは単なる括弧として扱われます。

c.f. calc() - CSS: カスケーディングスタイルシート | MDN

sample

See the Pen learn CSS calc() by KIKIKI (@chaika-design) on CodePen.

所感

レスポンシブのサイトを作るには重要になってくる単位。
文章のコンテンツがメインの場合はデフォルトの文字サイズを基準に余白を付けたいので em, rem を使いたい派
モーダルとかの幅は vw 使っていけそうな気がするが、モバイルサイズなら左右 16px のマージンにしたいし、画面幅が広い時は max-width: calc( 最大文字数 + モーダルの余白 ) みたいな感じにしたいかも。
何かで見たフォントサイズを vw 指定にするのは結局いい感じのコントロールが大変そうな気がしたので、実際問題どうなんだろう？(vw 指定でやってる人が居れば話を聞いてみたい。)

[参考]