流体間隔クランプ() ジェネレーター
2 つのビューポート幅にわたる最小サイズと最大サイズから実際の流体 CSS Clamp() 値を計算します。傾斜と交差点が段階的に表示され、ライブ サイズ変更プレビューが表示されます。
処理中...
0%
結果
CSS Clamp() は、フォント サイズの場合とまったく同じ方法で間隔を設定します。プロパティは、たまたまフォント サイズの代わりにマージン、パディング、またはギャップになっているだけです。このページでは、320 ピクセルから 1280 ピクセルのビューポートにわたって 8 ピクセルから 32 ピクセルの範囲で計算機が開きます。これは、携帯電話では狭く感じられ、メディア クエリが表示されないデスクトップでは広く感じるセクション パディングやカード ギャップの一般的な手順です。
基礎となる計算では、数値が何を表すかは関係ありません。流動的な見出しサイズを生成する同じ傾きと y 軸の交点の式が流動的な間隔の値を生成します。そのため、以下の内訳は、8 ピクセルと 32 ピクセルがどのようにしてパディング用のコピー準備完了の Clamp() ライン、clamp(...) に変わるかを正確に示しています。
ビューポート幅スライダーをドラッグして、2 つのブレークポイント間の任意の幅で間隔がどのように感じられるかをプレビューし、最小値と最大値を調整して範囲を狭めたり緩めたりして、完成した線を必要な間隔プロパティに直接コピーします。