媒体查询浏览器的不同缩放级别

Question

我是使用CSS3媒体查询的响应式设计的新手.我清楚地了解我们如何使用这些媒体查询来定位不同的设备,但我感到困惑的地方是BROWSER ZOOMING !!

对于Eg:这是我正常的身体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.因此,你可以通过使用公共媒体查询同时针对Ipad的小型和浏览器缩放(@ 175%)
  
  ,即@media屏幕(最小宽度:732px),
  
  所以,如果你的目标使用媒体查询不同的设备(让网站响应为不同的设备)那么你的浏览器缩放本身就被考虑在内了.