Comment puis-je créer correctement une cascade de requêtes multimédias de largeur minimale ?

Spécificité CSS en cascade avec des requêtes multimédias de largeur minimale

Lors de la conception d'un site Web, il est courant d'utiliser les principes de conception Web réactifs, notamment l’approche mobile d’abord. Cela nécessite l'utilisation de requêtes multimédias de largeur minimale pour cibler des appareils de tailles d'écran spécifiques. Cependant, cela peut prêter à confusion lors de l'écrasement des valeurs CSS pour des résolutions d'écran plus élevées, car la largeur minimale la plus faible semble avoir la priorité.

En effet, les requêtes multimédias sont évaluées du moins restrictif au plus restrictif. Dans l'exemple fourni :

@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; }
}

Les deux requêtes multimédias sont vraies lorsque la largeur de l'écran est de 600 px ou plus. Cependant, la deuxième règle apparaît plus tard dans la cascade, elle est donc prioritaire et la taille de police la plus petite de 1,7em est appliquée.

Résolution

Pour écraser efficacement les déclarations dans des niveaux supérieurs résolutions utilisant des largeurs minimales sans recourir à des sélecteurs plus forts ou à une largeur maximale, vous pouvez changer l'ordre de vos médias requêtes :

@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; }
}

Cela garantit que la taille de police la plus grande est appliquée lorsque la largeur de l'écran est d'au moins 600 px. Cela vous donnera la spécificité en cascade que vous attendez, la largeur minimale la plus élevée étant prioritaire.

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!