CSS クランプジェネレータ

CSS clamp()ジェネレータは、2 つの画面幅の間で値をスムーズにスケーリングする単一のクランプ(最小、優先、最大)宣言を構築します。 media クエリをいくつか書き込んで見出しを電話機の 24px からデスクトップの 48px にステップする代わりに、最小サイズ、最大サイズ、およびそれらがマッピングするビューポート範囲を設定し、ジェネレータは、その間のすべてのサイズを補間する CSS の 1 行を返します。

clamp()関数は下限値、優先値、上限値の3 つの引数を取ります ブラウザは最小値を下回るか最大値を超える場合を除き 優先値を使用します その場合 その境界にロックされます このジェネレータは 優先値をビューポートの線形関数として計算し 固定されたrem項とvw項を組み合わせます そのため 結果はウィンドウと歩調を合わせて大きくなります 最小値を下回ったり 最大値を超えたりすることはありません この手法はしばしば流体タイポグラフィーと呼ばれますが マージン、パディング、ギャップ、幅についても同様に機能します。

クライアントサイドの JavaScript を使用してすべてがブラウザで計算されるため、入力した内容はアップロードされず、ツールはロードされるとオフラインで動作します。ピクセルまたはレム単位でサイズを入力し、カスタム ルート フォント サイズを設定し、一般的なビューポート幅で計算された値を示すプレビュー テーブルを読み取ることができるため、クランプ () をスタイルシートに貼り付ける前に曲線の動作を確認できます。

Fluid sizing には、意図的に避ける価値のあるアクセシビリティ トラップが 1 つあります。 vw が応答しないため、純粋に viewport 単位で中間項が表現されるクランプ式は、リーダーのフォント サイズ設定を無視します。また、成長できないテキストは WCAG 1.4.4 に失敗します。 rem コンポーネントを優先値に保持することは、生成された出力が行うことですが、サイズが依然としてブラウザのズームとより大きなデフォルト フォントに応答することを意味します。常に両方の境界を設定します。それらがなければ、値はどちらの方向にも無制限にスケールされます。