「max」関数を使用せずにCSSで最大幅を計算するにはどうすればよいですか?

CSS での最大幅の計算

CSS では、現時点では、マックス関数。 max-width: calc(max(500px, 100% - 80px)) や max-width: max(500px, calc(100% - 80px))) のような構造を使用してこれを試みても、望ましい結果は得られません。

メディア クエリを使用した CSS ソリューション

ただし、メディア クエリを使用して同様の効果を達成することも可能です。

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

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

この例では、 . selector 要素の最大幅は、ビューポートのサイズに基づいて決まります。ビューポートの幅が 500px より広い場合、最大幅はビューポートの幅と 80px の差として設定されます。ただし、ビューポートが 500 ピクセル以下の場合、最大幅は明示的に 500 ピクセルに設定されます。

このアプローチでは、メディア クエリを効果的に使用して、画面サイズに基づいて最大幅を動的に計算し、目的の機能を模倣します。制限された方法での最大機能。

以上が「max」関数を使用せずにCSSで最大幅を計算するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。