Maison > interface Web > tutoriel CSS > le corps du texte

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

Patricia Arquette
Libérer: 2024-11-11 11:27:02
original
412 Les gens l'ont consulté

Why Does My Lower Min-Width Media Query Override My Higher One?

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; }
}
Copier après la connexion

À 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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal