CSS 計算で要素の最大幅を決定できますか?

CSS 計算で最大幅を決定できますか?

要素の最大幅を計算に基づいて設定することが望ましい場合があります。 2 つの値のうち小さい方。ただし、CSS 構文では通常、max-width に 1 つの値しか許可されません。

考えられる解決策

考えられるアプローチの 1 つは、次のようなネストされた計算を使用することです。

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

ただし、これはすべてのブラウザでサポートされているわけではありません。

もう 1 つの潜在的な解決策は、メディア クエリを使用することです。

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

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

この方法では 2 つのルールが作成されます。1 つは画面幅が広い場合です。 500 ピクセルより小さい画面用と、500 ピクセルより狭い画面用の 1 つです。 2 番目のルールは最初のルールを効果的にオーバーライドし、画面幅がしきい値を下回る場合に要素の最大幅が 500 ピクセルに制限されるようにします。

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