ホームページ  >  記事  >  ウェブフロントエンド  >  CSS で最大幅のネストされた計算を実行できますか?

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

Barbara Streisand
Barbara Streisandオリジナル
2024-10-29 22:25:29953ブラウズ

Can Nested Calculations be Performed for Max-Width in 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。