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

Question

我是使用CSS3媒体查询的响应式设计的新手。我清楚地了解我们如何使用这些媒体查询来定位不同的设备，但我感到困惑的地方是浏览器缩放!!

对于例如：这是我正常的身体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/ 的缩放和像素宽度之间的关系），这是附近768px的ipad mini 。 因此，您可以使用常见的媒体查询来定位Ipad mini和浏览器缩放（@ 175％）
  
  即 @media screen和（min-width：732px）
  
  因此，如果您使用媒体查询定位不同的设备（使网站对不同的设备做出响应），那么您的浏览器缩放本身就会被考虑在内。