CSS は 2 つの値の最大幅を計算できますか?

CSS: 最大幅の計算を実現する

CSS では、複雑な計算を使用して最大幅を確認することは可能か、またはそれらの計算の最大値を計算するには?この記事では、CSS の領域を掘り下げ、この興味深い概念について説明します。

Max の計算

最初のクエリは、計算を実行する可能性を検討します。

<code class="css">max-width: calc(max(500px, 100% - 80px))</code>

CSS は、入れ子関数を通じて最大値が決定されるこのような複雑な評価に対応できますか?残念ながら、CSS はネストされた最大値または最小値を確認できないため、この機能を備えていません。

計算の最大値

2 番目の調査では、代替アプローチを検討します。

<code class="css">max-width: max(500px, calc(100% - 80px)))</code>

このアプローチでは、500px と計算されたパーセンテージの 2 つの値の最大値を決定します。ただし、この構文は、式の最大値を評価する能力に欠けている CSS とも互換性がありません。

CSS の回避策

一方、この結果を達成するための純粋な CSS メソッドはありません。私たちには、現実的な解決策が現れます。メディア クエリは、賢い回避策を提供します。

<code class="css">.yourselector {
  max-width: calc(100% - 80px);
}

@media screen and (max-width: 500px) {
  .yourselector {
    max-width: 500px;
  }
}</code>

メディア クエリを使用すると、ビューポートの幅に基づいて最大幅の値を条件付きで適用できます。この手法は、目的の機能を模倣し、デバイスの画面サイズの変化に応じて最大幅が動的に調整されるようにします。

以上がCSS は 2 つの値の最大幅を計算できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。