CSS clamp() ジェネレーター

最小／最大値とビューポート幅から、滑らかに可変する CSS clamp() を生成します。

Results...

default

そのまま使いたい時に

clamp(1rem, 0.824rem + 0.751vw, 1.5rem);

font-size

CSS用のフォントサイズ設定に

font-size: clamp(1rem, 0.824rem + 0.751vw, 1.5rem);

width

幅の設定に

width: clamp(1rem, 0.824rem + 0.751vw, 1.5rem);

height

高さの設定に

height: clamp(1rem, 0.824rem + 0.751vw, 1.5rem);

tailwind

Tailwindの一時利用に

[clamp(1rem,0.824rem+0.751vw,1.5rem)]

tailwind-text

Tailwind用のフォントサイズ設定に

text-[clamp(1rem,0.824rem+0.751vw,1.5rem)]

css-variables

CSS変数の設定に

--clamp: clamp(1rem, 0.824rem + 0.751vw, 1.5rem);

これがPreviewテキストです！

補足

  • 下記の方法でレスポンシブな文字サイズが設定可能です。
    • 「スマートフォン表示時の想定画面幅」をビューポート最小値に入力します
    • 「PCの最大コンテナサイズ」をビューポート最大値に入力します
    • 「スマートフォンで表示させたい文字サイズ」を最小値に入力します
    • 「PCで表示させたい文字サイズ」を最大値に入力します
  • rootでフォントサイズを変更している場合（例: :root { font-size: 62.5% } 等）は正しく動作しない場合があります。その場合、結果をpxで出力するオプションを使ってください。