Webサイトのレスポンシブ対応で、メディアクエリなどを使いモバイルとデスクトップのフォントサイズを指定する場合があります。その際、モバイルとデスクトップの間のフォントサイズを流動的にしたい場合のmixinです。
clamp()を利用していますが、min()とmax()を使っても同じ結果を得られます。
clamp()とは
clamp()はCSSの関数で、上限値と下限値の範囲において、値を適用することができます。
clamp(最小値, 推奨値, 最大値);流動フォントサイズのmixin
@use "sass:math";
@use "sass:map";
$breakpoints: (
'mobile' : 480px,
'desktop' : 1200px,
) !default;
// Responsive font size
@mixin rsfontsize($fontsize, $fontsize-l) {
font-size: clamp( #{$fontsize * 1px}, ( #{$fontsize * 1px} + (( 100vw - #{map.get($breakpoints, mobile)} ) * (( #{$fontsize-l} - #{$fontsize} ) / ( #{num(map.get($breakpoints, desktop))} - #{num(map.get($breakpoints, mobile))} )))), #{$fontsize-l * 1px} );
}
// strip units helper function
@function num($input){
@return math.div( $input, ($input * 0 + 1) );
}※clamp()、min()、max()などの関数の中ではcalc()の記述はいらないようでした。使い方
p {
@include rsfontsize(16, 24);
}この指定だけで、下記のようになるので楽ちんです。
- 画面幅：〜480px → フォントサイズ：16px
- 画面幅：480px 〜 1200px → フォントサイズ：流動
- 画面幅：1200px〜 → フォントサイズ：24px
IEのためにちょっとだけ対応
IEはclamp()に対応していないので、フォントサイズが適用されないということが起こります。
なので、IEにも対応しているmax()min()で書けば大丈夫かなと思ったのですがうまく表示されませんでした。
なので、対応策としてIE用にdesktop用のfont-sizeを追加しておくと良いかもしれません。
// Responsive font size
@mixin rsfontsize($fontsize, $fontsize-l) {
font-size: #{$fontsize-l * 1px}; // IE用
font-size: max( #{$fontsize * 1px}, min( ( #{$fontsize * 1px} + (( 100vw - #{map.get($breakpoints, mobile)} ) * (( #{$fontsize-l} - #{$fontsize} ) / ( #{num(map.get($breakpoints, desktop))} - #{num(map.get($breakpoints, mobile))} )))), #{$fontsize-l * 1px}) );
}※clamp()、min()、max()などの関数の中ではcalc()の記述はいらないようでした。まとめ
推奨値をvw指定するなどの方法は色々な記事を拝見しながら試してはみたのですが、思ったような結果が得られず。。。あきらめずに調べていくうちに下記「参考」のCodePenや記事に辿り着き、それをもとに自分用のmixinを作ってみました。
今回は紹介していませんが、こちらのmixinを利用して、WordPress 5.8から実装されたtheme.json>settings > typography > fontsizesで作られるフォントサイズを流動フォントサイズに対応したりしています。
同じように上限・下限があり流動的にサイズを変化させたいところで使えそうです。
