どんな画面幅でも同じ比率で拡大・縮小するサイトを作る【scss】

はじめに

どんな画面幅でも同じ比率で拡大・縮小するサイトをHTMLとSCSSを使って作ります
もちろん画像で作るパワープレイではないです

まずは完成品イメージ

作り方

上記のようなサイトを作るにはvwを単位として使うのですが
画面幅に対しての値なのでfont-size: 3.73333vw;というような指定が必要となり、可読性が悪く扱いにくいです。

scssの機能であるfunctionとmixinを使うことで
慣れ親しんだpxの値で書けるようにする関数を作り、可読性を良くして扱いやすくしましょう

functionとmixin

// 基準にする画面幅（デザインデータの幅）
$defaultWidth : 375;

// px → vw
@function vw($size, $width: $defaultWidth) {
  @return (100 / $width) * $size * 1vw;
}

// fontsize px → vw
@mixin fontSize($size: 10, $width: $defaultWidth) {
  font-size: $size * 1px; // vw非対応用
  font-size: vw($size, $width);
}

「$defaultWidthをデザインデータの幅と合わせる」のがポイント

実際に使ってみる

.catch {
  margin-bottom: vw(10); // margin-bottom: 10px
  padding-bottom: vw(5); // padding-bottom: 5px
  border-bottom: vw(2) dashed #ccc; // border-width: 2px
  @include fontSize(18); // font-size: 18px
}

余白や線の太さはfunctionを呼び出し、文字サイズはmixinを呼び出して記述します。
カッコ内の値はデザインデータのpxの値を入れればOK。勝手にvwの値に計算して出力されます。
ちなみに%も画面幅に依存するのでwidth: 40%;といった指定も問題ありません！

どんなタイミングで使う？

主にSPサイトや、装飾の多いLPなどで使うのが良いかと思います
特に装飾の多いLPでは絶対配置を多用するので、画面幅による微妙なズレを調整する手間が省けて便利です

PCサイトは対応すべき画面幅が広いため、あまり向いてないと思っています。
同じ比率で拡大・縮小させてしまうと、あまりに表示コンテンツが小さい・大きいという現象が発生してしまい
メディアクエリで細かく値を調整する必要が出てきて冗長なコードになってしまう印象です。

おわりに

LPを作りまくっていた時代にお世話になったので記事にしたかった！！
線の太さをついついpxで書いてしまって修正したことが何度もあります。手癖かな