Pouvez-vous utiliser des expressions mathématiques dans la propriété « max-width » en CSS ?

Réaliser des calculs de largeur maximale en CSS

Est-il possible d'utiliser des expressions mathématiques dans la propriété max-width en CSS, telles que :

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

ou

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

Réponse :

Alors que le calcul direct au sein de la propriété max-width n'était auparavant pas possible, le CSS moderne introduit une solution de contournement à l'aide de requêtes multimédias :

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

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

Cette approche définit la largeur maximale par rapport à la largeur de la fenêtre d'affichage avec un minimum de 500 px, garantissant que l'élément ne dépasse pas cette largeur même lorsque le conteneur parent est plus large que 500 px.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!