Media Queries für verschiedene Zoomstufen Browser

Question

Ich bin ein Neuling auf Responsive Design CSS3 Media Queries verwenden. Ich verstehe klar, wie wir mit diesen Medienabfragen auf verschiedene Geräte abzielen, aber der Ort, an dem ich verwirrt bin, ist BROWSER ZOOMING !!.

Für Eg: Dies ist meine normale Körper CSS-Regel

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

und wenn ich will diese CSS-Regel ändern, um ein Geräts, deren Breite in dem Bereich von 150px und 600px i füge diese besonderen Ziel Medienabfrage.

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

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


} 

Problem: Ich bin mit Google Chrome und wenn ich in etwa 200% vergrößern, dann diese besondere Medienabfrage ins Spiel kommt.

Woher weiß ich, welche Medienabfragen für verschiedene Zoomstufen geschrieben werden sollen oder wie die Beziehung zwischen Zoomstufen und Pixelbreite des Browsers aussehen soll?

Answer 1

Nach vieler Suche. Ich habe meine Antwort gefunden.

• Wir brauchen keinen Browser mithilfe von Medienanfragen explizit ein- Ziel. Wenn wir in unseren Browser zoomen, verhält es sich wie verschiedene Geräte.
  
  Für zB: Wenn wir auf Stufe 175% zoomen ist die Pixelbreite unserer Bildschirmgröße 732px (Sie können die Beziehung zwischen Zoomen und Pixelbreite bei http://mqtest.io/) finden, die 768px von ipad mini in der Nähe ist. daher können Sie durch die Verwendung einer gemeinsamen Medienabfrage
  
  dh @media Bildschirm und (min-width: 732px) sowohl Ipad mini und Browser-Zoom (@ 175%) Ziel
  
  Also, wenn Sie verschiedene Geräte zielen mit Medienabfragen (make site responsive für verschiedene Geräte), dann wird das Zoomen Ihres Browsers selbst berücksichtigt.