Les calculs CSS peuvent-ils déterminer la largeur maximale d'un élément ?

Les calculs CSS peuvent-ils déterminer la largeur maximale ?

Il peut être souhaitable de définir la largeur maximale d'un élément en fonction d'un calcul, par exemple en choisissant le la moindre de deux valeurs. Cependant, la syntaxe CSS n'autorise normalement qu'une seule valeur pour la largeur maximale.

Solutions potentielles

Une approche possible consiste à utiliser des calculs imbriqués, tels que :

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

Cependant, cela n'est pas pris en charge par tous les navigateurs.

Une autre solution potentielle consiste à utiliser des 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 méthode crée deux règles : une pour les écrans plus larges. supérieur à 500 px et un pour les écrans plus étroits que 500 px. La deuxième règle remplace effectivement la première, garantissant que la largeur maximale de l'élément est limitée à 500 px lorsque la largeur de l'écran est inférieure à ce seuil.

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!