【SCSS・CSS】便利なレスポンシブメモ

今回は画面幅に応じて、要素幅や余白、フォントサイズも可変的にレスポンシブさせるリキッドコーディング方法のメモです。状況に応じて使える3パターン用意しました。

htmlタグのfont-sizeをvwで設定してremでコーディングする

• 「html」タグのフォントサイズに、デザインカンプの大きさに合わた「vwの値」を指定し、各要素のcssプロパティをremで指定していく方法
• 今回は画面幅375pxの時に、1remの値が10pxになるようにvwの値をhtmlタグに設定
• 1vwは画面幅の1%

計算方法（下記のどちらでもOK）

【1remに設定したいpx値】 /  【デザインカンプの幅】 * 100 = 【htmlタグに設定するfont-size（vw値）】

100 / 【デザインカンプの幅】 *  【1remに設定したいpx値】 = 【htmlタグに設定するfont-size（vw値）】

今回の例で計算すると2.6666vwとなります。

@media screen and (max-width: 768px) {
    html {
    	font-size: 2.6666vw;
    }
}

vw は画面幅を基準とした単位、remは「html」のfont-sizeを基準とした単位なので、これにより以下のように値が自動で変化するようになります。

• 画面幅375pxの時には1remが約10px相当

あとはデザインカンプ通りに、widthやmargin``font-sizeなど全てのcssプロパティをremでコーディングしていくだけです。

各プロパティの値を、remで指定していくことによって、画面幅を変更した場合も、同じ比率を保ったまま拡大縮小でき、テキスト等の改行位置も同じように維持されるはずです。

@media screen and (max-width: 768px) {
    /* hogeのwidthがデザインカンプで300pxの時 */
    .hoge {
        width: 30rem;
    }
    /* hogehogeのデザインカンプのmarginが30px, font-sizeが70pxの時 */
    .hogehoge {
        margin: 3rem;
        font-size: 7rem;
    }
}

SCSSでfunctionを用意してpxからvwに自動変換する方法

• SCSSを用いてpx→vwの変換を自動で行う関数を用意してvwを指定していく方法
• htmlのfont-sizeを変えたくない場合に有効

//デザインカンプの横幅を定義
$comp: 375;
//pxからvwに変換する関数
@function pv($num, $width: $comp) {
    @return calc(1vw * $num / $width * 100);
}

pv（px to vwの略）という自作した関数を用いて、以下のようにcssプロパティの値を設定していきます。
デザインカンプ通りの値をpv関数を渡して、scssをコンパイルすると値が全てvwで出力されているかと思います。

@media screen and (max-width: 768px) {
    .hoge {
        width: pv(300);
    }
    .hogehoge {
        padding: pv(20) pv(10) pv(5) pv(30)
        font-size: pv(40);
    }
}

CSSのカスタムプロパティを活用して、vw値を設定していく方法

• cssのカスタムプロパティを活用して、vw値を設定してく方法
• scssを使いたくない場合やhtmlのfont-sizeを変えたくない場合にも有効。

/* カスタムプロパティを設定 */
:root {
    --compSp: 100vw / 375;
}
/* カスタムプロパティを呼び出して、デザインカンプの値を掛け算する */
.hoge {
    padding: calc(var(--compSp) * 40);
}