我是使用
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像素)因此,如果您使用媒体查询来定位不同的设备(使网站响应不同的设备),那么您的浏览器缩放本身就被考虑在内.
