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

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

参考サイトはこちら。

つまり、特定の画面サイズで表示したいフォントサイズを基準に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等になると、フォントサイズが大きくなるので、基本的にはメディアクエリの中に記述するのが良いでしょう。