ビューポート連動clamp()関数一般化のデモ

ビューポート幅375～1280pxの間では、H1要素のフォントサイズが20～30pxの間で変化します。
ボックスの幅を操作して効果をご確認ください。

CSS

:root {
    --break-point: 375px;
    --min-h1-fs: 20px;
    --max-h1-fs: 30px;
    --ratio-h1-fs: calc((30 - 20) / (1280 - 375)); /* 実数値で計算 */
    --h1-fs: clamp(
        var(--min-h1-fs),
        (100vw - var(--break-point)) * var(--ratio-h1-fs) + var(--min-h1-fs),
        var(--max-h1-fs)
    )
}

/* 全体に有効 */
h1 {
    font-family: 'Verdana', sans-serif;
    font-size: var(--h1-fs);
}