不同縮放級別瀏覽器的媒體查詢

Question

我是使用CSS3媒體查詢進行響應式設計的新手。我清楚地知道我們如何使用這些媒體查詢來定位不同的設備，但我感到困惑的地方是BROWSER ZOOMING !!。

對於如：這是我的身體正常的CSS規則

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

，當我想改變這個CSS規則來定位設備，其寬度落在的爲150px和600px的範圍內我加入這個特別的媒體查詢。

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

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


} 

問題：我使用谷歌瀏覽器，當我在約200％，放大那麼這個特定的媒體查詢進場。

我如何知道什麼媒體查詢要寫入不同的縮放級別或以另一種方式放大瀏覽器縮放級別和像素寬度之間的關係。

Answer 1

經過大量搜索。我找到了我的答案。

• 我們並不需要爲目標的瀏覽器使用媒體查詢明確變焦。當我們放大瀏覽器時，它表現爲不同的設備。
  
  對於例如：如果我們放大水平在175％我們的屏幕尺寸的像素寬度爲732px（你可以找到http://mqtest.io/變焦和像素寬度之間的關係），這是iPad的迷你附近768px。 因此可以通過使用一個共同的媒體查詢
  
  即@media屏幕同時定位的Ipad迷你瀏覽器和縮放（@ 175％）和（最小寬度：732px）
  
  因此，如果指定使用不同的設備媒體查詢（讓網站響應不同的設備），那麼您的瀏覽器縮放本身就被考慮在內。