CSSのclamp関数でフォントサイズを可変にする方法

Filed under: css — kdcs @ 25年6月14日 土曜日

ページがレスポンシブ対応の場合、フォントサイズも可変させたい場合がある。
cssのclamp関数を使うと画面幅に応じてフォントサイズを可変させることができる

font-size: clamp(最小値, 基準値, 最大値);

基準値はvwでフォントサイズを指定し、その計算方法はこちら
例:コンテンツの幅が1200pxの時にフォントサイズを16pxで表示させる

vwの計算方法
(基準となる文字サイズ)÷(基準となる幅)× 100

16 ÷ 1200 × 100 = 1.33...

この基準値に合わせてフォントサイズの最小値13px、最大値16pxとすると以下の通り

font-size: clamp(13px, 1.33vw, 16px);

min() max() clamp()のサポートブラウザを見る

サイト内検索

カテゴリー

最近の投稿

« |CSSのclamp関数でフォントサイズを可変にする方法| »
↑上に戻る