CSS クランプジェネレータ

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

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

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

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

こちらが実際のヘディングのCSSクランプジェネレータです。 sizesとして24と48 pxを入力し、viewportsとして360と1440 を入力し、16pxルートを保持し、Generate clamp()を押します。 outputはfont-sizeです: clamp(1.5rem、1rem + 2.2222vw、3rem); プレビューテーブルで確認します:360で24px、768で33.07px、1024で38.76px、1440で48px。 360未満ではヘディングは1.5remに留まり、1440を超えると3remで停止します。これは、境界のある流体タイポグラフィーの全体のポイントです。