clamp()にてfont-sizeをレスポンシブ対応にする際の計算方法とScss関数

clamp()関数を使うと最小サイズと最大サイズとその間の変化を指定できます。

ウィンドウ幅が320pxから1200pxまでで、フォントサイズの16pxから24pxに変化する場合以下のように設定できます。

.paragraph {
    font-size: clamp(1rem, 0.636rem + 1.82vw, 2rem); 
}

clamp()にて上記のように設定する方法の解説

左端の値は最小サイズ。
右端の値は最大サイズ。
真中は変化する値を入れます。

スムーズに変化するには最小サイズと最大サイズと最小viewportと最大viewportから値を計算します。

まずは真ん中の右の変化する値の計算方法を解説します。

フォントが変化する量をvw単位にする計算

1. 最大font-sizeから最小font-sizeを減算しフォントサイズの変化する幅を求める
2. 最大viewportから最小viewportを減算しウィンドウの変化する幅を求めておく
3. フォントが変化する量をvwにするために2を1で徐算し100をかける（切り上げ）

例）ウィンドウ幅が320pxから1200pxまでで、フォントサイズの16pxから24pxに変化する場合の値をvw単位で求める計算式

$$
(24-16)/(1200-320)*100
$$

フォントが変化しない部分をrem単位にする計算

1. 変化するサイズ（vw）が最小viewport時に何pxになるか計算する
2. 最小フォントサイズから1の数値を減算する
3. 2はpx単位の変化しない部分のサイズとなるので0.0625を掛けてremにする

例）ウィンドウ幅が320pxから1200pxまでで、フォントサイズの16pxから24pxに変化する場合の値をrem単位で求める

$$
(16-(24-16)/(1200-320)*320)*0.0625
$$

上記を簡単に計算してくれるサービスサイト

Min-Max-Value Interpolation

ややこしい計算をしなくともこちらのサイトで簡単に計算してくれます。

ただしいちいち全部こちらで計算するのは面倒になってくると思うので、Sassのfunctionを作成すして対応しても良いかと思います。

Scssの関数にて簡単に出力する方法

いちいちサイトに行き計算をするのも面倒になるので、Scssを使用している場合は以下のような関数にて出力させるという方法もあります。

@use "sass:math";

@function responsiveFontSizeClamp($minFontSize, $maxFontSize, $minViewport, $maxViewport) {

    //最大font-sizeから最小font-sizeを減算しフォントサイズの変化する幅を求める
    $fontSizeRate: $maxFontSize - $minFontSize;
    //最大viewportから最小viewportを減算しウィンドウの変化する幅を求めておく
    $viewportRate: $maxViewport - $minViewport;

    //フォントが変化する量をvw単位にする計算(小数点２桁で丸める)
    $changingSize: math.div(math.round(math.div($fontSizeRate, $viewportRate) * 10000 ),100);

    //フォントが変化しない部分をrem単位にする計算
    $fixedSize: math.div(math.round(($minFontSize - math.div($fontSizeRate, $viewportRate) * $minViewport) * 62.5), 1000);

    //最小フォントサイズをrem単位にする計算（小数点3桁で丸める）
    $minRemFontSize: math.div(math.round($minFontSize * 62.5 ),1000);

    //最大フォントサイズをrem単位にする計算（小数点３桁で丸める）
    $maxRemFontSize: math.div(math.round($maxFontSize * 62.5),1000);

    //出力
    @return clamp(#{$minRemFontSize}rem, #{$fixedSize}rem + #{$changingSize}vw, #{$maxRemFontSize}rem);
}

.paragraph {
    font-size: responsiveFontSizeClamp(16,32,320,1200);
}
.description {
    font-size: responsiveFontSizeClamp(14,24 ,320 ,1200 );
}