【もう悩まない】レスポンシブコーディング

はじめに

レスポンシブコーディングって地味に難しいですよね

そんなあなたのお悩みを一瞬で解決する方法を紹介します

まずはreset.cssなどで、htmlに対して以下のように記述します

html {
  font-size: 62.5%;
}

@media screen and (min-width: 769px) and (max-width: 1440px) {
  html {
    font-size: 0.625vw;
  }
}

これで完成です

コーディング時には、例えばデザインでpadding:30pxだった場合、
その値を10分の1にしてremで指定すればOKです

つまり以下のように記述します

.hoge {
  padding: 3rem;
}

こうすることで、1441px以上および768px以下では値が30pxとなり、
769px～1440pxでは画面幅に応じた大きさになります

いちいち計算するのが面倒であれば、Sassを使用している場合mixinで以下のような関数を作ってあげると楽です👇

@function rem($pxcel) {
  @return $pxcel * 0.1rem;
}

使用する際は以下のようにします

.hoge {
  padding: rem(30);
}

デモサイトを用意しました

デモサイトで検証ツールを開き、各要素の値を確認してもらうとわかりますがほぼすべてremで指定しています

全部remで指定してあげれば勝手にレスポンシブになってくれるのですごいですね

remはルート（html）のフォントサイズを参照します

この性質を利用し、htmlに対してvwを指定することで、remを使った際に画面幅に応じて拡大縮小するようになります

回避策としてはメディアクエリのmax-widthを調整して0.625vwが効く範囲を狭めます

@media screen and (min-width: 769px) and (max-width: 1000px) {
  html {
   　font-size: 0.625vw;
  }
}

👆先ほどmax-width:1440pxだったところを1000pxにしました

実はこのTIpsは、とあるクライアント様とお仕事をした際にクライアント様が記述していたコードで見つけたものです

当時、そんなやりかたがあるのか！と衝撃をうけました

htmlのフォントサイズを62.5%にしてrem指定するというのは聞いたことがあるのですが、vwを指定するというのは驚きですね

ぜひこのTipsを日々のWEB制作に役立てていただけたら幸いです