画面幅でフォントサイズを制御

CSS

画面幅に応じてフォントサイズを変化させた方がいい時ってありますよね?(私はたまーにあります)

そんな時この公式を当てはめてvw指定で制御したりしています。

表示したいサイズ ÷ 画面幅 × 100 = ●● vw

例えばこんな感じですね。

画面幅1,200pxの時にフォントサイズ16pxにしたい。

16px ÷ 1200px × 100 = 1.33 vw

すなわち「font-size: 1.33vw ;」と指定。

注意したいのが、メディアクエリで制限をかけないと、とんでもない極小サイズになったり巨大文字になっちゃうので忘れずに・・。

タイトルとURLをコピーしました