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

スマートフォンのサイト実装時にフォントサイズを画面幅に合わせて拡大・縮小したいという要望がたまにあるので、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) {
  fint-size: $font-size / $base-width * 100vw;
}

.sample {
  @include vw(20);
}

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

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2022年5月
1234567
891011121314
15161718192021
22232425262728
293031