CSS Clamp() 計算ツール

CSS クランプ(MIN, PREFERRED, MAX) を使用すると、1 つの宣言がメディア クエリのスタック全体を置き換えることができます。値は、最小のビューポートの下では MIN に、最大のビューポートの上では MAX に留まり、その間でスムーズにスケーリングします。難しいのは、PREFERRED 項 (0.833rem + 0.833vw などのビューポート相対式) であり、誰も手作業で導出したくないものです。この計算機は、最小サイズ、最大サイズ、およびそれぞれが適用されるビューポート幅の 4 つの数値から実際に計算します。

最終的な線だけでなく、すべての中間数値が表示されます。勾配 (ビューポートのピクセルごとに値が何サイズ単位で増加するか)、vw 係数として表される同じ勾配、および y 軸交点 (線が指定した 2 点を正確に通過するように vw 項に追加される定数) です。チュートリアルからクランプ() 値を理解せずに貼り付けた人は、ここで実際の演算を見て確認できます。

ビューポート幅のスライダはライブ プレビュー ボックスを駆動するため、流体スケーリングが計算されるだけでなく表示されます。最小ブレークポイントと最大ブレークポイントの間にドラッグして、実際のブラウザ ウィンドウのサイズが変更されるのとまったく同じようにサンプル テキストのサイズが変更されるのを確認してください。出力行と内訳はキーストロークごとに更新されます。これは、基本フォント サイズ自体も変換する必要がある場合に、px から rem へのコンバーターと自然に組み合わせられます。

ワンステップで完全な流体タイポグラフィ システムのタイプスケール モードに切り替えます。ベース サイズとモジュラー比 (1.125 から 1.5 まで) を入力すると、6 つのサイズ (small、base、h4、h3、h2、h1) が得られます。それぞれが、緩やかなモバイル プログレッションと完全なデスクトップ比の間の独自の Clamp() ラインとして計算され、CSS カスタム プロパティのブロックとしてコピーする準備ができています。