開発

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


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

参考サイトはこちら。
【CSSテクニック】ブロック要素の比率を維持しながら可変し、文字も可変させる方法 | 大阪南森町のホームページ制作集団 – 株式会社リースエンタープライズ

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

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

20px / 1280px * 100 = 1.5625vw

とすれば良いと。

でもこれを毎回手計算して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等になると、フォントサイズが大きくなるので、基本的にはメディアクエリの中に記述するのが良いでしょう。


タグ: scss レスポンシブ

コメントを残す