Spécificité CSS, requêtes média et largeur minimale
Je suis en train de redessiner mon blog avec responsive Web design à l'esprit, et la méthode "mobile first" - En bref, j'essaie d'utiliser min-width pour éviter tout type de réplication ou de css.. aucun affichage: Aucun etc..
Mon problème est que lorsque j'ai besoin de surécrire une valeur CSS, la largeur minimale inférieure a la priorité. Exemple:
@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; }
}
Je m'attendrais quand je suis dans des résolutions de 600px et supérieures à obtenir un 2.2 em h2, mais à la place je reçois 1.7 em.. Dans mes outils de développement je vois que la déclaration 2.2 em est là, mais l'autre l'emporte.. Il ne fait pas de sens!
Pourrais-je continuer à utiliser des largeurs minimales et écraser efficacement les déclarations dans des résolutions plus élevées sans utiliser de sélecteurs plus forts ou de largeur maximale..?
1 réponses
Je m'attendrais quand je suis dans des résolutions de 600px et supérieures à obtenir un 2.2 em h2, mais à la place je reçois 1.7 em.. Dans mes outils de développement, je vois que la déclaration 2.2 em est là, mais l'autre a préséance.. Il ne fait pas de sens!
C'est logique. Si le média remplit min-width: 600px, alors il devrait également remplir min-width: 320px; en d'autres termes, tout ce qui a au moins 600 pixels de large est également au moins 320 pixels de large, car 600 est supérieur à 320.
Puisque les deux requêtes médias évaluent à true, la règle qui se produit en dernier a priorité dans la cascade, ce qui rend votre code équivalent à ceci:
h2 { font-size: 2.2em; }
h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
Cela explique pourquoi le 2.2em apparaît dans vos outils de développement mais ne prend pas d'effet apparent.
La solution la plus simple consiste à changer vos blocs @media afin que vos règles se mettent en cascade dans le bon ordre:
@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; }
}