Comment puis-je m'assurer que les règles CSS s'appliquent correctement lors de l'utilisation de « min-width » dans les requêtes multimédias ?

Comprendre la spécificité CSS, les requêtes multimédias et la largeur minimale

Lors de la mise en œuvre d'une conception Web réactive à l'aide de l'approche « mobile first », min- width permet aux concepteurs de définir des règles CSS basées sur la largeur de l'appareil. Cependant, des défis surviennent lors de l'écrasement des valeurs CSS, car la largeur minimale la plus faible peut avoir la priorité.

Le problème

Un exemple illustre le problème :

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

Idéalement, les résolutions supérieures à 600 px devraient afficher une taille de police h2 de 2,2 em. Cependant, la déclaration 1.7em prévaut.

La résolution

Les requêtes média fonctionnent sur une hiérarchie de spécificité, où la règle la plus spécifique l'emporte sur celles avec moins de spécificité. Dans l'exemple ci-dessus, la première requête multimédia est plus spécifique car elle spécifie une largeur minimale plus élevée.

L'approche correcte consiste à réorganiser les requêtes multimédias afin que la règle la plus spécifique, qui définit une taille de police de 2,2 em , apparaît en dernier :

@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 règle CSS souhaitée pour les résolutions supérieures à 600 px prend effet, même si sa valeur de largeur minimale est inférieure.

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!