レスポンシブデザインで、見出しのフォントサイズをブレークポイントを設けてフォントサイズを調整していましたが、clamp関数を使うことによって簡単に設定することができるようになりました。
スポンサーリンク
書式
clamp( 最小値, 推奨値, 最大値 );
最小値:表示したい最小のフォントサイズ
推奨値:表示させたいフォントサイズ
最大値:表示したい最大のフォントサイズ
以下の式で推奨値を求めます。
推奨値 = 最小のフォントサイズ ÷ 横幅 × 100
例えば横幅を320pxにして、最小フォントサイズを18pxにした場合、推奨値は以下のようになります。
18px ÷ 320px ✕ 100 = 5.625vw
設定例
以下に3つのサンプルを示します。
推奨値は、画面最小サイズ320pxをベースにして、最小フォントサイズを16px、18px、20pxに変えています。
サンプル1
横幅:320px
最小フォントサイズ:16px
最大フォントサイズ:32px
推奨値:16px ÷ 320px ✕ 100 = 5
font-size: clamp(16px, 5vw, 32px);
サンプルテキスト
フォントサイズ可変のテスト
表示しているフォントサイズは、
サンプル2
横幅:320px
最小フォントサイズ:18px
最大フォントサイズ:32px
推奨値:18px ÷ 320px ✕ 100 = 5.625
font-size: clamp(18px, 5.625vw, 32px);
サンプルテキスト
フォントサイズ可変のテスト
表示しているフォントサイズは、
サンプル3
横幅:320px
最小フォントサイズ:20px
最大フォントサイズ:32px:
推奨値:20px ÷ 320px ✕ 100 = 6.25
font-size: clamp(20px, 6.25vw, 32px);
サンプルテキスト
フォントサイズ可変のテスト
表示しているフォントサイズは、
コメントを残す