レスポンシブフォントサイズ：画面サイズに応じてフォントサイズを縮尺する

画面サイズに応じてフォントサイズを可変したい（レスポンシブに対応したい）場合のメモです。

参考サイトはこちら。

【CSSテクニック】ブロック要素の比率を維持しながら可変させる方法 | 株式会社リースエンタープライズ https://wreath-ent.co.jp/blog-3560/

高さ不明のブロック要素の比率を維持させる方法をご紹介します。応用やブラウザ対策まで。レスポンシブデザインのコーディングにそのまま使えるCSSテクニックです。

つまり、特定の画面サイズで表示したいフォントサイズを基準にvw単位で指定するという方法です。

画面サイズが1280ピクセルで20pxで表示してこのままの縮尺で表示したい場合は

とすれば良いと。

でもこれを毎回手計算してstyle.cssに記述するのもちょっと面倒ですので、SCSSの関数を使って自動生成するようにしてみます。

@function responsiveFont($px, $vw){
	@return ($px / $vw) * 100 + vw;
}

これでそれぞれの引数にフォントサイズと画面サイズを指定して

font-size: responsiveFont(20, 1280);

コンパイルすれば

.font{
  font-size: 1.5625vw;
}

となります。
基準となるフォントサイズや画面サイズを変数にしてやればもっと楽かもしれません。

$base: 20px;
$desktop_vw: 1280px;

.font{
  font-size: responsiveFont($base, $desktop_vw);
}

但し、このままだと画面サイズが1920px等になると、フォントサイズが大きくなるので、基本的にはメディアクエリの中に記述するのが良いでしょう。