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

我是使用 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;
}


}

问题：我正在使用Google Chrome,当我放大到大约200％时,这个特定的媒体查询就会起作用.

我如何知道什么媒体查询为不同的缩放级别写入,或者以另一种方式说明浏览器缩放级别和像素宽度之间的关系.

解决方法

经过很多的搜索.我找到了我的答案.

>我们不需要使用媒体查询明确地定位浏览器缩放.当我们放大浏览器时,它的行为是不同的设备.
例如：如果我们放大到175％,我们的屏幕尺寸的像素宽度是732px(您可以找到缩放和像素宽度之间的关系,在http://mqtest.io/),这是ipad mini的768px附近.因此,您可以通过使用常见的媒体查询来定位Ipad迷你和浏览器缩放(@ 175％)即@media屏幕和(最小宽度：732像素)因此,如果您使用媒体查询来定位不同的设备(使网站响应不同的设备),那么您的浏览器缩放本身就被考虑在内.

原文地址：https://www.jb51.cc/css/216419.html