Maison  >  Article  >  interface Web  >  Les calculs CSS peuvent-ils déterminer la largeur maximale d'un élément ?

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

Susan Sarandon
Susan Sarandonoriginal
2024-10-30 04:39:27387parcourir

Can CSS Calculations Determine the Maximum Width of an Element?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn