〔 Web制作〕

CSS clamp()生成ツール

2つの画面幅と値を指定して、なめらかに変化するCSS clamp()を生成します。

Fluid CSS

2つの画面幅からclamp()を生成

画面幅に応じてなめらかに変化するCSS値を線形補間で計算します。

clamp()値

clamp(1rem, 0.6479rem + 1.5023vw, 2rem)

CSS全体

font-size: clamp(1rem, 0.6479rem + 1.5023vw, 2rem);

375px / 16px → 1440px / 32px

〔このツールでできること〕

見出しサイズや余白をブレークポイントごとに切り替えず、画面幅に応じて自然に変化させたいときのclamp()を計算します。値のみ、またはCSSプロパティを含む形でコピーできます。

375pxで16px、1440pxで32px
↓
font-size: clamp(1rem, 0.6479rem + 1.5023vw, 2rem);