【CSS】モバイルファーストな指定だけでPCまでいい感じに表示出来る実装方法を発明したぞ！

どうせスマホ(SP)でしか見られてないしPCは最低限表示できればいいやって時ありますよね。

コード

:rootセレクタでスタイルに使用する変数を定義します。
--viewport-widthは、SP幅に相対的な値を設定するための変数で、初期値として768pxを設定しています。画面幅が768px以上の場合に1に変更されます。

--base-unit は、スタイルを定義する際に使用する基本単位で、初期値として100vwを設定しています。画面幅が768px以上の場合に1pxに変更されます。

foundation/_base.scss

:root {
  --viewport-width: 768;
  --base-unit: 100vw;
  @media screen and (min-width: 768px) {
    --viewport-width: 1;
    --base-unit: 1px;
  }
}

以下のcalcの指定でスマホの画面幅に合わせたレイアウトと、PCの固定ピクセル数のレイアウトを一度に実現できます。

component/_card.scss

.c-card {
  width: calc(500 / var(--viewport-width) * var(--base-unit));
  font-size: calc(30 / var(--viewport-width) * var(--base-unit));
}

Sassで関数化

calcの指定が長いので関数化します。

functuons/_size.scss

@function vw($size: 10) {
  @return calc(#{$size} / var(--viewport-width) * var(--base-unit));
}

短い記述でよくなります。

component/_card.scss

.c-card {
  width: vw(500);
  font-size: vw(16);
}