web-dev-qa-db-fra.com

Requêtes multimédias pour différents niveaux de zoom du navigateur

Je suis novice en matière de conception réactive à l'aide de requêtes multimédias CSS3. Je comprends clairement comment nous ciblons différents appareils à l'aide de ces requêtes multimédias, mais l'endroit où je suis confus est NAVIGATEUR ZOOMANT !!.

Par exemple: Ceci est ma règle normale du corps css

#body {
    margin: 0 auto;
    width: 70%;
    clear: both;
}

et quand je veux changer cette règle css pour cibler des appareils dont la largeur tombe dans la plage de 150px et 600px j'ajoute cette requête multimédia particulière.

@media only screen and (min-width:150px) and (max-width:600px){

#body {
    margin: 0 auto;
    width: 90%;
    clear: both;
}


}

Problème: J'utilise Google Chrome et lorsque je fais un zoom avant à environ 200%, cette requête multimédia particulière entre en jeu.

Comment puis-je savoir quelles requêtes multimédias écrire pour différents niveaux de zoom ou pour exprimer d'une autre manière quelle est la relation entre les niveaux de zoom du navigateur et la largeur des pixels.

csshtml5css3responsive-designmedia-queries
31
bhavya_w

Après beaucoup de recherches. J'ai trouvé ma réponse.

  • Nous n'avons pas besoin de cibler explicitement le zoom du navigateur à l'aide de requêtes multimédias. Lorsque nous zoomons sur notre navigateur, il se comporte comme différents appareils.

    Par exemple: si nous zoomons au niveau 175%, la largeur de pixel de notre taille d'écran est de 732 pixels ( Vous pouvez trouver une relation entre le zoom et la largeur de pixel à http: //mqtest.io/) qui est à proximité 768px de l'ipad mini. vous pouvez donc cibler à la fois l'Ipad mini et le zoom du navigateur (@ 175%) en utilisant une requête multimédia commune

    c'est-à-dire @ écran média et (min-largeur: 732px)

    Donc, si vous ciblez différents appareils à l'aide de requêtes multimédias (rendez le site réactif pour différents appareils), le zoom de votre navigateur est lui-même pris en compte.

42
bhavya_w