web-dev-qa-db-fra.com

Media Queries: vérifiez la hauteur et la largeur min?

J'essaie de changer le CSS sur ma page en fonction de la hauteur et de la largeur min du navigateur, donc j'utilise ceci:

@media (min-height: 500px), (min-width: 580px) {
    /* CSS stuff */
}

Mais pour une raison quelconque, cela ne fonctionne pas. Je peux vérifier la hauteur minimale et la largeur maximale (ou vice versa) ou la hauteur maximale et la largeur maximale en même temps, mais la vérification des deux valeurs minimales ne semble pas fonctionner.

Je devrais le préciser davantage: je veux que le navigateur agisse si une hauteur min o une largeur min devient vraie. L'utilisation de l'opérateur and ne fonctionnera que si les deux critères sont vrais.

Est-ce que je fais quelque chose de mal?

htmlcsshtml5css3media-queries
24
The.Prophecy

Utilisez and au lieu d'une virgule, comme ceci:

@media (min-height: 500px) and (min-width: 580px) {
    /* CSS stuff */
}
53
Alexandra

Avez-vous ajouté la balise meta suivante dans:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Voici REf: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

Après cela, utilisez votre requête multimédia:

@media (min-height: 500px) and (min-width: 580px) {
    /* CSS stuff */
}

Pour plus de détails sur les requêtes multimédias, vous pouvez obtenir plus d'informations sur http://stephen.io/mediaqueries/ pour tous les appareils iOS. Si vous avez d'autres questions, faites-le moi savoir. Même vous pouvez avoir une meilleure idée d'ici http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

6
Divya Bhalodiya

Utilisez les requêtes multimédias les unes dans les autres:

@media  screen and  (min-height: 40px)  {
   @media  screen and  (min-width: 50px)  {
    /*enter css here to apply for both condition*/
   }
}
6
Igor Cube