Comment puis-je calculer la largeur maximale en CSS sans utiliser la fonction « max » ?

Calcul de la largeur maximale en CSS

En CSS, il n'est actuellement pas possible de calculer directement la largeur maximale en fonction d'autres valeurs en utilisant le fonction maximale. Tenter de le faire avec des constructions comme max-width: calc(max(500px, 100% - 80px)) ou max-width: max(500px, calc(100% - 80px))) ne donnera pas le résultat souhaité.

Une solution CSS avec des requêtes multimédias

Cependant, il est possible d'obtenir un effet similaire en utilisant 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>

Dans cet exemple, le . votre élément selector aura une largeur maximale basée sur la taille de la fenêtre. Lorsque la fenêtre est plus large que 500 px, la largeur maximale sera définie comme la différence entre la largeur de la fenêtre et 80 px. Cependant, lorsque la fenêtre d'affichage est de 500 px ou moins, la largeur maximale sera explicitement définie sur 500 px.

Cette approche utilise efficacement les requêtes multimédias pour calculer dynamiquement la largeur maximale en fonction de la taille de l'écran, imitant ainsi la fonctionnalité souhaitée de la fonction max de manière restreinte.

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!