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

Question

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

For Eg：这是我正常的 body css 规则

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

当我想更改此 css 规则以针对宽度在 150 像素和 600 像素范围内的设备时，我添加此特定媒体查询。

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

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


}

问题：我使用的是谷歌浏览器，当我放大到大约 200% 时，这个特定的媒体查询就会发挥作用。

我如何知道要为不同的缩放级别编写哪些媒体查询，或者换一种说法，浏览器缩放级别和像素宽度之间的关系是什么。

Answer 1

经过大量搜索。我找到了我的答案。

-

我们不需要通过使用媒体查询来明确定位浏览器缩放。当我们放大浏览器时，它表现为不同的设备。

例如：如果我们以 175% 级别缩放，则屏幕尺寸的像素宽度为 732 像素（您可以在mqtest.io [存档] 找到缩放和像素宽度之间的关系），它在 ipad 的 768 像素附近小型的。 因此，您可以使用通用媒体查询同时定位 Ipad mini 和浏览器缩放 (@175%)

即 @media 屏幕和 (min-width:732px)

因此，如果您使用媒体查询定位不同的设备（使网站响应不同的设备），那么您的浏览器缩放本身就会被考虑在内。