Pourquoi les requêtes non multimédias remplacent-elles parfois les requêtes multimédias en CSS ?

Requêtes multimédias et requêtes non multimédias : comprendre la spécificité CSS

En CSS, les requêtes multimédias sont utilisées pour appliquer des styles en fonction de l'écran de l'appareil taille ou d'autres caractéristiques de la fenêtre d'affichage. Cependant, on observe souvent que les requêtes multimédias semblent avoir une priorité inférieure par rapport aux déclarations CSS classiques.

Raison de la priorité inférieure

Ce comportement découle du concept de cascade CSS . Lorsque plusieurs règles ciblent le même élément, le navigateur priorise les règles en fonction de leur spécificité. Les sélecteurs avec une spécificité plus élevée remplaceront ceux avec une spécificité plus faible.

Les requêtes multimédias n'améliorent pas intrinsèquement la spécificité des sélecteurs. Par conséquent, si un sélecteur de requête non-média et un sélecteur de requête média ont la même spécificité, le sélecteur de requête non-média sera prioritaire lorsque la requête média n'est pas pertinente.

Exemple :

Considérez l'extrait CSS suivant :

.logo img {
    width: 100%;
}

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo img {
     width: 120%;
  }
}

Dans cet exemple, la règle de requête non-média définit une largeur par défaut de 100 % pour l'image du logo. Cependant, lorsque la largeur de l'écran se situe dans la plage spécifiée, la requête multimédia est activée et définit la largeur à 120 %.

Cependant, si la largeur de l'écran est en dehors de cette plage, la règle de requête non multimédia prendra priorité, remplaçant le paramètre de largeur de la requête multimédia.

Solutions pour augmenter la priorité

Pour élever la priorité des requêtes média :

1. Échanger l'ordre des ensembles de règles :

   • Déplacer la règle de requête média sous la requête non média règle pour profiter de la cascade order.

2. Augmenter la spécificité du sélecteur :

   • Améliorez la spécificité du sélecteur de requête multimédia en ajoutant une balise ou un attribut supplémentaire sélecteurs. Par exemple, le changer en .logo a img augmenterait sa spécificité.

3. Utilisez !important (Attention) :

   • Cette méthode consiste à ajouter "!important" à la règle de requête multimédia. Cependant, il est déconseillé en raison de son potentiel à causer des problèmes de maintenance.

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!