frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

【CSS】画面サイズに合わせてfont-sizeの拡大縮小

スポンサードリンク


スポンサードリンク


レスポンシブサイトやLPの背景にテキストが乗ってる場合に画像の拡大・縮小に合わせてテキストも拡大・縮小させたい時に使います。
画面サイズに合わせてfont-sizeの拡大縮小することが可能です。

計算式は下記です。
font-size: calc({フォントサイズ}vw * 100 / 基準の幅);

font-size: calc(16vw * 100 / 900);

基準の幅というのがわかりにくいと思いますが、コンテンツ幅のことですね。
どの幅の時~pxのフォントサイズにしたいという基準があれば式に数値をあてはめられると思います。

デモ


See the Pen
zbzLRp
by funclur (@funclur)
on CodePen.

codepenだと若干フォントサイズ違いますが、幅900pxで16pxになるはずです。