CSS の「max-width」プロパティ内で数式を使用できますか?

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

CSS の max-width プロパティ内で次のような数式を使用することは可能ですか:

max-width: calc(max(500px, 100% - 80px))

または

max-width: max(500px, calc(100% - 80px)))

答え:

以前は max-width プロパティ内での直接計算は不可能でしたが、最新の CSS ではメディア クエリを使用した回避策が導入されています。

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

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

このアプローチでは、最大幅がビューポートの幅に相対して最小 500 ピクセルに設定され、親コンテナの幅が 500 ピクセルよりも広い場合でも要素がその幅を超えないようにします。

以上がCSS の「max-width」プロパティ内で数式を使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。