position: absolute; で使える単位は、auto、%、em、px である

上図のようなレイアウトのレスポンシブを考えると vw をサイズ単位として設定するのが、最適な方法である。上図のテキストのサイズ、Font Awesomeのサイズ、余白、カードサイズなどは全てvwの単位でサイズを指定した。この「全て」というのがポイントである。

大前提の解決策として、全てのアイテムの配置は、grid layout を使う。各アイテムはこれで大体のレイアウトが設定できる。

作成するレイアウトは x方向のパターンの分だけ組むからレスポンシブに掛かる時間は短縮できる。細かなレイアウトの必要があれば、position: absolute; で % を使って微調整をする。追加や訂正も簡単に出来そうだ。

では px は使わないのか？ 段落の文字のサイズは、px の固定サイズで行こう。本のサイズは、文庫判、四六判などいろんな種類があるが、読み易い文字サイズで統一されているからだ。