CSS spécificité, les Requêtes de Média et min-width

Je suis la refonte de mon blog avec le responsive web design à l'esprit, et le "mobile first" de la méthode En bref, je suis en train d'utiliser min-width pour éviter tout type de réplication ou css.. pas de display:none etc..

Mon problème est que lorsque j'ai besoin d'écraser une valeur CSS, la baisse des min-width l'emporte. 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'attend quand je suis dans les résolutions de 600px et ci-dessus pour obtenir un 2.2 em h2, mais au lieu de cela je obtenir 1.7 em.. Dans mes outils de Dev, je vois que le 2.2 em déclaration est là, mais l'autre l'emporte.. Ça n'a pas de sens!

Pourrais-je continuer à utiliser min-largeurs et efficacement remplacer les déclarations dans des résolutions plus élevées, sans l'aide de plus de sélecteurs, ou max-width..?

  • Pour clarifier sur BoltClock la réponse ci-dessous, c'est ce que le navigateur est la pensée: Il frappe à la première requête de média, 'Oh, j'ai un min-largeur de 600! Nous allons définir ma taille de police à 2,2 em!'. Puis il continue sur la prochaine requête de média, 'Oh, j'ai un min-largeur de 320! Laissons de ma police à cela maintenant!".
  • La licorne réponse est bonne, mais peut-être vous devriez penser en termes de max-largeur au lieu de min-width. Si vous voulez un petit H2 taille sur des écrans plus petits, vous pouvez écrire font-size: 2.2em sans requête de média et puis font-size:1.7em dans une requête pour max-width:599px.
  • max-width n'est pas vraiment une bonne pratique.. difficile à expliquer, mais lorsque vous utilisez le max-width, en fin de ré-écriture de la duplication CSS .. check html5rocks.com/en/mobile/responsivedesign
  • Merci Josh, cristal clair!
InformationsquelleAutor George Katsanos | 2012-04-24
  1. 34

    Je m'attend quand je suis dans les résolutions de 600px et ci-dessus pour obtenir un 2.2 em h2, mais au lieu de cela je obtenir 1.7 em.. Dans mes outils de Dev, je vois que le 2.2 em déclaration est là, mais l'autre l'emporte.. Ça n'a pas de sens!

    Cela a du sens. Si les médias s'acquitte de min-width: 600px, alors il devrait également remplir min-width: 320px; en d'autres termes, tout ce qui est à moins de 600 pixels de large est également à moins de 320 pixels de large, parce que 600 est supérieure à 320.

    Depuis deux requêtes de média true, la règle qui se produit en dernier est prioritaire 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; }

    Qui explique pourquoi la 2.2em apparaît dans vos outils de développement, mais ne prend pas d'effet apparent.

    La meilleure solution est de passer votre @media blocs autour de sorte que vos règles 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; }
}
    • CSS spécificité tient également compte de l'ordre d'apparition... parfois, il vous suffit de miss choses les plus évidentes lorsque vous passez 12h devant le pc! Merci Licorne:)
    • Je n'ai pas l'obtenir. Comment se fait-si un support d'au moins de 600px de large est également à moins de 320px de large? est-ce vraiment dire que c' pourrait être 320px de large(par exemple, par le redimensionnement de la fenêtre du navigateur pour être plus petit)?
    • Wang: 600px est plus de 320px. Donc, si quelque chose est 600px ou plus large, c'est aussi 320px ou plus. C'est le sens de "au moins".
    • Je vous remercie, monsieur, l'a obtenu. Après avoir joué avec des exemples de code, j'ai réalisé min-width peut être lu comme "plus égaux que d'". Qui rend plus simple pour la compréhension: "donnez-moi une taille de police à 2,2 em si la largeur de l'écran est plus égaux que 600px"
    InformationsquelleAutor BoltClock