概要
CSSでブラウザの横幅に合わせて、フォントサイズを変更します。
方法はいろいろありますので、こちらは私の個人的な方法で備忘録になります。
施策
CSS
html {
font-size: clamp(0.75rem, 1.29vw, 1rem);
}htmlに設定します。大元であるhtmlに設定することでその中の要素は相対的に変わるようにします。
html {
font-size: clamp(最小値, 推奨値, 最大値);
}最小値、最大値はブラウザの横幅で変わるフォントサイズの最小と最大です。
推奨値はページの横幅の最大（ブラウザの横幅ではなくデザインデータの最大幅で今回は1240px）でブラウザの初期フォントサイズ16pxを割った数値です。ページの横幅によって値は変わります。
16 ÷ 1240 x 100 = 1.29 (1.29032258の0以下省略)SCSS
@mixin fs($size: 16) {
font-size: ($size / 16) * 1rem;
}それ以外の要素のフォント指定は全てremで指定で相対的に変わるようにします。
rem単位での指定はわかりづらいのでSCSSにmixinなどを使用してpxからremに変換できるようにしておきます。
コメントを投稿する