レスポンシブページの作り方

導入

最近レスポンシブなwebページを作っています。
大まかに言うと1024px未満の横幅を持つデバイスではコンテンツの比率を維持したまま拡縮するように。
1024px以上であれば横幅が変わっても一定のサイズ（例えば1000pxのまま）で見れるようにしています。

そんなページを作る際のテクニックになります。

結論

サイズを指定する際の単位にpxではなくremを使用します。

SPサイズでデザインが上がってきた場合、320px,375px,414pxというサイズになっていることが多いです。
たとえば375pxのデザインが回ってきたとしましょう。
その場合は以下のようにします。

html {
  // 基準サイズ（375pxで1pxになるように設定）
  // 1pxになるようにしているのは、remのときに小数点を打つのが面倒だからです
  font-size: calc(100vw / 375);

  @media screen and (min-width: 1024px) {
    // PCサイズでは常に固定
    font-size: 1px;
  }
}
body {
  // 全体的に多用するフォントサイズが10px想定ならbodyで設定します
  font-size: 10rem;
}

解説

remというのは最上位、つまりhtml要素の文字サイズを基準にした相対な単位です。
htmlでfont-sizeが10pxなら1rem=10px、24pxで設定していたら1rem=24pxになります。

つまりhtml配下の子孫要素に使用する単位をremにすることで、html要素の文字サイズに連動するページが作成できます。
font-sizeは言うに及ばず、width,height,margin,paddingなどにも使えます。
borderにも使えますが、基準にした横幅(375pxとか）より小さいとピクセルで表した際に0.8pxとかになって消えてしまうかもしれません（未検証です）。

相対指定でコンテンツサイズ大きくなりすぎたり小さくなりすぎるときはmin-width,max-width,min-height,max-heightが使えます。
左右余白を調整して真ん中に寄せたい場合はmargin: 0 auto;で調整できます。

文字サイズはmin-font-size,max-font-sizeなんてのがあります。
わたしの妄想の産物で、実装されていません。
かわりにfont-sizeでmin関数などが使えるブラウザがあるようです。
ちなみにmin関数ってこんなものです。

わたしはこの辺を使うことでどーにかこーにかレスポンシブなページを実現してます。