条件
ビューポート 320〜1200px、サイズ 1〜2.5rem、ルート 16px
CSS
clamp(1rem, 0.45rem + 2.72vw, 2.5rem)
デザインツール
CSS Clamp ジェネレーター - 流体的レスポンシブサイズ
最小・最大 viewport 幅と目標サイズ範囲から、font size、spacing、そのほか length を viewport に応じて伸縮させる clamp() 式を計算できます。
CSSclampResponsive
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
设计配色
CSS Clamp ジェネレーター
现代流式排版 (Fluid Typography/Spacing) 的最佳实践：结合 calc() 和 vw 动态自适应。
流式排版 Fluid Typography Demo
拖动调整容器宽度可预览变化 (需要 Resize Observer 支持，当前为近似模拟)
利用シーン
- viewport に応じて伸縮する本文サイズを作る
- 見出し用の最小・最大 rem 範囲を設定する
- 一部の spacing を media query なしで clamp に置き換える
使い方
- 最小と最大の viewport 幅を設定する
- 対応する最小・最大サイズ（rem）と root font size を設定する
- 生成された clamp() 式をコピーする
入出力サンプル
FAQ
式はどのように計算されますか？
指定した viewport 範囲内で線形の傾きを使ってサイズを min から max へ変化させ、その両端を clamp(min, preferred, max) で制限します。
font size 専用ですか？
いいえ。rem 範囲で表せる長さであれば、font size、spacing、width などにも使えます。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。
CSS 単位変換
CSS 単位変換 - px、rem、em、vw
px、rem、em、pt、vw、vh、% の相互変換を行えます。root font size、親要素 font size、viewport size を設定し、レスポンシブ対応やデザインから実装への引き継ぎに活用できます。
CSS 単位 変換
ピクセル定規
ピクセル定規 - 画面サイズと目盛り表示
ページ上に horizontal または vertical の pixel ruler を描画できます。長さや tick 間隔を調整し、window size と device pixel ratio を見ながら layout や mockup 上の CSS pixel を確認できます。
Pixels Ruler Measure