CSS clamp() で設定したフォントサイズサンプル
見出しサイズ計算に便利なサイト
オンラインの自動計算ツール
※Fluid responsive font size calculatorの方は calc は不要と思われます。（そのまま残しても不具合はありませんが…）
CSS関数
pxで出力
padding: _clamp-px(最小サイズ, 最少viewport, 最大サイズ, 最少viewport) 0; //pxで指定
例) padding: _clamp-px(48, 375, 68, 1366) 0;@function _clamp-px($minsize, $minvp, $maxsize, $maxvp) {
$a: ($maxsize - $minsize ) / ($maxvp - $minvp );
$b: $minsize - ($a * $minvp);
@return clamp($minsize * 1px, (round($b * 1000 * 1px) / 1000) + (round($a * 1000 * 100vw) / 1000), $maxsize * 1px);
}
remで出力
font-size: _clamp-rem(最小サイズ, 最少viewport, 最大サイズ, 最少viewport) 0; //pxで指定
例)font-size: _clamp-rem(30, 375, 40, 1366);@function _clamp-rem($minsize, $minvp, $maxsize, $maxvp) {
$html-font-size: 16; //px
$minsize: $minsize / $html-font-size;
$minvp: $minvp / $html-font-size;
$maxsize: $maxsize / $html-font-size;
$maxvp: $maxvp / $html-font-size;
$a: ($maxsize - $minsize ) / ($maxvp - $minvp );
$b: $minsize - ($a * $minvp);
@return clamp(round($minsize * 1000 * 1rem) / 1000 , (round($b * 1000) / 1000) * 1rem + (round($a * 100 * 100vw) / 100), round($maxsize * 1000 * 1rem) / 1000);
}