clamp()

clamp() ジェネレーター

最小幅・最大幅と最小・最大サイズを入れるだけで clamp() のCSSを生成。画面幅に応じて滑らかに変わるフォントサイズが作れます。rem と px を切り替え可能、プレビュー付き。

使い方:狭い画面と広い画面の「幅」と「サイズ」を入れると、レスポンシブに効くCSSが出ます。

仕組み・詳しく
clamp(最小, 基準, 最大)。基準は画面幅に応じて変化し、指定した最小〜最大の範囲に収まります。基準は「傾き=(大サイズ−小サイズ)÷(大幅−小幅)」を rem + vw の calc() にまとめたもの。メディアクエリを書かずに文字サイズを可変にできます。

入力

px
px
px
px
min/max 単位
ルート
px

出力

—
傾き
—
vw 部分
—
下駄(rem)
—
プレビュー— → —

見出しサンプル Aa Gg 0123

広告