【SASS/SCSS】remやvwでサイズやフォントをレスポンシブ対応するメモ📝

単位についてざっくりおさらい

単位解説
px(ピクセル)スクリーンの1pxを1とする単位。固定サイズなのでレスポンシブには向かない。
%(パーセント)親要素に対する割合を示す単位。親によってサイズが変わる。
em(エム)親要素に対する文字サイズを基準とした単位。文字の字下げなどに使う。
rem(レム)ルート(html)要素の文字サイズを基準とした単位。
htmlの標準は16pxなので、何もしない場合1rem=16pxになる。
レスポンシブに向いてる。
vw(ブイダブリュー)ブラウザ幅(ビューポート)を基準にした単位。
vwは横幅、vhは縦幅を表す。100vw・100vhで横幅・縦幅いっぱいを表す。

remでレスポンシブ対応?

pxよりもremがレスポンシブに向いている理由として、文字サイズ切り替えに対応しやすいというのがあります。
例えばPCでは16px/スマホではPCと比較し80%のサイズで指定したい場合、remで指定していたら

html {
font-size: 62.5%
}

@media screen and (min-width:768px) {
  html{
   font-size: 50%;
  }
}

これだけで対応できます。便利。

でもこれだと全体の指定しかできません。
デザインを忠実に再現する場合、要素に個別に指定しなきゃいけない状況が多いのでこの方法はあんまり使いません。

ぐわー

vwでレスポンシブ対応したい

じゃあvwでレスポンシブ対応する?
やってみよう
PCでちょうどいい大きさにするとスマホではちっさい!!
逆も然り~~~~~

見てのとおりPC表示ではvw指定は向いてないので、固定表示(PC)ではremまたはpx可変表示(SP)ではvwを使うのがよさげ。(2022.04.14現在🐈)

rem、vwでレスポンシブ対応

やってみるよ!え~~っとPCでは16px=1.6remで~~スマホではモニタ幅75pxの時に14pxにしたいんだけども‥‥vwに変換すると‥‥
??????????
はい!!
便利なのきた!やってみよう~
Baseが375pxでfont-size:14pxを指定
.sample{
  font-size: 1rem;
}

@media screen and (max-width: 767px){
    font-size: 3.733vw;
}
ツールつかってもめんどくさいな。。。

SCSSでvwの比率を指定できるfunction、mixin

SCSS使ってるなら、functionとmixin使えば簡単にできるよ

モニタサイズ375pxを基準としたvw値を計算してくれるfunction、mixinです。

html{
  font-size:62.5%; //ルートのフォントサイズを10pxにした上で→
}
body{
  font-size:1.6rem; // →サイト全体を1.6rem(=16px)にする
}

// モニタサイズ375pxを起点にしたvwのサイズ指定
@function vw($size, $viewport: 375) {
  $rate: 100 / $viewport;
  @return $rate * $size * 1vw;
}

// 上記のvwを利用したフォントサイズの指定
@mixin fz($font_size: 10) {
  font-size: $font_size * 1px; //vw非対応の場合の保険
  font-size: vw($font_size); //フォントをvw指定
}

padding:vw(20) vw(15);@include fz(16);て感じで使います。

詳しくはcodepenを見てね

紹介は以上です!もっと良い方法あったら是非教えてください~~!備忘録でした。

参考サイト