Zenn
🍣

rootのfont-sizeにvwを設定して画面幅によって可変にしたいmixin

2022/08/17に公開
CSS
Scss
フロントエンド
tech

はじめに

レスポンシブにしたときのfont-sizeどうしていますか？
breakpointをいっぱい切る、vwで良い感じに調整する、clamp使う、良い感じのmixin作る、何もしない、と色々やり方があると思います・・・。
地味にめんどくさかったりするのでmixinを作ったほうが早いですね、きっと。
かつ、remを使いたい。htmlに62.5%つけるあれです。それをvwで設定します。

※Dart Sass対応。まだ対応していない方は適宜calc()で書き換えて頂けると。

コード

mixin.scss
/*
 * htmlのfont-size用
 */
@function rootFz($baseWidth: 1280px) {
  @return math.div(10px, $baseWidth) * 100vw;
}
/*
 * font-size可変用
 */
@function calcFz($max) {
  $value: math.div($max, 10);
  @return clamp(10px, #{$value}rem, #{$max}px);
}
style.scss
html {
  font-size: rootFz();
}
@media screen and (max-width: 768px) {
  html {
    font-size: rootFz(375px);
  }
}
.hoge {
  font-size: calcFz(16);
}
@media screen and (max-width: 768px) {
  .hoge {
    font-size: calcFz(14);
  }
}

解説

rootFz()

rootFzの引数のデフォルト（$baseWidth）はPCのデザインカンプの幅を入れてください。
今回はPCデザインカンプ1280pxの場合です。
SPの場合はメディアクエリ内でrootFzを記述して、引数にSPのデザインカンプを入れてください。
今回はSPデザインカンプ375pxの場合です。
コンパイルすると↓の値がhtmlに入っているはずです。（PC）

calcFz()

font-sizeをclamp()で計算します。
引数にデザインカンプ上の値を入れてください。
最小値は10pxにしてあります。（10px以下には基本的にはならないので問題ないはずです。）
基準の値はhtmlにrootFz()しており、1rem=10pxになるように設定してあるので、1/10した値を入れます。
※例だと1.6remが入ります。
最大値はデザインカンプの値そのままpxで入るようにしています。

さいごに

画面縮めたり大きくしたり、文字サイズ大きくしたり小さくしたりしても気持ち良いfont-sizeの完成です。
デザインに寄せてレイアウトを崩さない方法なので、フォントサイズ小さくしてアクセシビリティ的にどうなの？とかあると思うので、部分的に使うのが良いかもしれません！
横幅MAXのときに使うとレイアウト崩れずに良い感じにできます！

Discussion