Pourquoi ma requête multimédia de largeur minimale inférieure remplace-t-elle celle de largeur supérieure ?

Spécificité CSS, requêtes média et largeur minimale : compréhension de la priorité

Lors de la refonte de sites Web avec une approche réactive, en maintenant la spécificité et en comprenant le comportement des requêtes média avec min -la largeur est cruciale. Cependant, un piège courant survient lorsque l'on tente d'écraser les valeurs CSS, car le paramètre de largeur minimale le plus faible peut avoir la priorité.

Considérons l'exemple suivant :

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

À des résolutions de 600 px et plus. , il est prévu que la taille de police du

l'élément doit être 2,2em. Cependant, la sortie affiche 1,7em à la place. Malgré la déclaration 2,2em apparaissant dans les outils de développement, elle est remplacée par le paramètre 1,7em dans la requête de largeur minimale inférieure.

Comprendre la priorité dans les requêtes multimédias

Ce comportement est dû à la manière dont les requêtes multimédias sont évaluées. Lorsque plusieurs requêtes multimédias s’appliquent à un élément, la règle qui apparaît en dernier dans l’ordre en cascade est prioritaire. Dans ce cas, étant donné que les deux requêtes multimédias sont évaluées comme vraies pour des résolutions de 600 px et plus, la dernière requête remplace la première.

Résoudre le problème

Pour résoudre ce problème, réorganisez les blocs de requête multimédia afin que les règles se répercutent dans l'ordre prévu :

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}

Copier après la connexion

En plaçant en premier la requête de largeur minimale inférieure, la taille de police de 2,2 em prendra désormais effet à des résolutions de 600 px et plus.

Conclusion

Comprendre la spécificité CSS et l'ordre en cascade des requêtes multimédias est essentiel pour une conception réactive. En examinant attentivement l'ordre de vos requêtes multimédias, vous pouvez vous assurer que votre code se comporte comme prévu et obtient le résultat visuel souhaité sur différentes tailles d'écran.

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!