我是一个新手响应设计使用css3媒体查询。我清楚地了解我们如何针对不同的设备使用这些媒体查询，但我感到困惑的地方是浏览器缩放!!。
- 对于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%时，这个特定的媒体查询就会发挥作用。
- 我如何知道为不同的缩放级别编写什么媒体查询，或者换句话说，浏览器缩放级别和像素宽度之间的关系是什么。**
2条答案
按热度按时间rwqw0loc1#
经过一番努力，我找到了答案。
我们不需要使用媒体查询来明确地定位浏览器缩放，当我们放大浏览器时，它会表现为不同的设备。
例如：如果我们以175%的水平缩放，我们屏幕大小的像素宽度为732 px（您可以在mqtest.io[存档]找到缩放和像素宽度之间的关系），这与iPad mini的768 px相近。因此，您可以使用通用媒体查询来定位iPad mini和浏览器缩放（@175%）
即**@媒体屏幕和（最小宽度：732 px）**
因此，如果您使用媒体查询针对不同的设备（使网站响应不同的设备），那么您的浏览器缩放本身也会被考虑在内。
rta7y2nd2#
我是这样解决的（.scss）