フォントサイズを画面幅に合わせて変更する

スマートフォンのサイト実装時にフォントサイズを画面幅に合わせて拡大・縮小したいという要望がたまにあるので、vwを使った実装方法をメモ。

サンプルコード

SPのデザイン幅が375px、文字サイズが20pxのテキストを画面幅に合わせて変更する想定で試してみます。

<h2 class="ttl">キャッチコピー</h2>

1vwは画面幅の1%と同じになります。

.ttl {
	font-size: 5.33333vw; /* 文字サイズ(20px) / デザイン幅(375px) * 100 = 5.33333 */
	text-align: center;
}
@media screen and (min-width: 768px), print {
	.ttl {
		font-size: 32px;
	}
}

これで画面幅に合わせてフォントサイズが変更されるようになりました。
vwのデモページ

都度計算するのは手間なので、Sassのmixinで計算できるようにしてみます。

@mixin vw($font-size, $base-width: 375) {
  font-size: $font-size / $base-width * 100vw;
}

.sample {
  @include vw(20);
}

デザイン幅375px想定にしているので、$base-widthは適宜変更ください。