CSS で最大幅のネストされた計算を実行できますか?

最大幅の CSS 計算

CSS では、" のような構文を使用して最大幅プロパティのネストされた計算を直接実行することはできません。 max-width: calc(max(500px, 100% - 80px))" または "max-width: max(500px, calc(100% - 80px)))"。

ただし、次のようにすることも可能です。メディア クエリを使用して同様の結果を達成します。次のコード スニペットを考えてみましょう:

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

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

この例では、画面サイズに基づいて .yourselector 要素の基本最大幅を確立し、80 ピクセルのマージンの余地を残します。ただし、画面の幅が 500 ピクセルを下回る場合は、基本の max-width を最大 500 ピクセルでオーバーライドし、要素の幅がビューポート内に収まるようにします。

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