CSS の比較関数: max()、min()、clamp()

この記事では、CSS の 3 つの比較関数 max()、min()、clamp() を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

おすすめ: 「css ビデオ チュートリアル 」

CSS 比較関数

#CSS 比較関数は 3 つあります:

max()
• min()
• clamp()

min と max

CSS の min 関数と max 関数は、js 関数の min 関数と max 関数に似ています。これらは、複数の属性の間で最小値または最大値を取得するために使用されます。属性はカンマで区切られます。例は次のとおりです。

#

      width: min(100px,200px,300px); //取值100px
      height: max(100px,200px,300px); //取值300px

#図に示すように、幅は最小値 100px、高さは最大値 300px となります。

clamp

clamp 関数 境界値を処理するために使用される、最小値、デフォルト値、および最大値の 3 つのパラメータを渡す必要があります。最大値より大きい場合は最大値が採用され、最小値より小さい場合は最小値が採用され、値が最小値と最大値の間の場合はデフォルト値が使用されます。

使用方法

clamp(MIN,DEFAULT,MAX)

クランプは、

max(MIN,min(DEFAULT,MAX))

ケース#と同等です。 ##

font-size: clamp(20px,10vw,40px);

分析中、10vw が 20px 未満の場合、つまりページ幅が 200px 以下の場合、最小フォントは 20px です。10vw が 40px より大きい場合、つまりページ幅が 200px 以下の場合、最小フォントは 20px です。幅が400px以上の場合、最大フォントは40pxです。200px〜400pxの間は、幅/10の計算式に基づいて計算されます。

が200px未満であることを確認してください。

は 400px

を超えています

200px ～ 400px

互換性

ご覧のとおりです この3つの機能は最近出たばかりなので互換性はあまり良くありません 国内ブラウザは全てブロックされており、主流ブラウザの最新版は可能ですレスポンシブ開発におけるこれら 3 つの数学の役割を考えると、これは良いことですが、レスポンシブ開発におけるこれら 3 つの関数の割合が将来的に徐々に増加する可能性があることは依然として明らかです。

一般的に使用される使用シナリオ

次に、一般的に使用されるいくつかの

使用シナリオ

サイドバーの応答

サイドカラム レイアウトの場合サイドバーの固定幅が必要です。レスポンシブ スタイルを作成する場合、最大幅を超えた場合に vw を使用してサイドバーの比率を修正することを検討できます。

      aside {
        background: #ccc;
        flex-basis: max(30vw, 150px);
      }
      main {
        background: #09acdd;
        flex-grow: 1;
      }

フォントの応答

クランプで最大値と最小値を制限し、中央のデフォルト値はウィンドウに応じて変更します

font-size:クランプ(20px, 10vw, 40px) );

グラデーションの滑らかな遷移

Gradient は、グラデーションの勾配線を指定します。一般的な操作によると、遷移は十分に滑らかではありません。明らかな遷移線が存在します。モバイル端末の場合

background: linear-gradient(135deg, #2c3e50, #2c3e50, #3498db);

minを使用して変更すると、遷移がよりスムーズになります

background: Linear-gradient(135deg, #2c3e50 、#2c3e50 min(20vw, 60%)、#3498db);

動的コンテナ幅

実際のアプリケーションでは、たとえば、モバイル端末で 100% 表示するためにデスクトップの幅を制限したい場合、次のように記述する必要があります

    .container{
      width: 1440px;
      max-width: 100%;
    }

今だけ

    .container{
      width: min(1440px,100%);
    }

は非常に簡潔かつ明確です。

まとめ

これら 3 つの機能はレスポンシブ レイアウトの開発に適しており、互換性を考慮する必要がない場合には適宜使用できますが、互換性を考慮したい場合は、使用しないのが最善です。最近はCSS関数に関することをまとめていますので、引き続き注目していただければ幸いです。ソースコードはこちらです。

ここをクリックして、ここをクリックしてください。

プログラミング関連の知識について詳しくは、プログラミング学習をご覧ください。 ！

以上がCSS の比較関数: max()、min()、clamp()の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。