浏览器不同缩放级别的媒体查询 [英] Media Queries for Different zoom Levels of Browser

问题描述

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

I am a newbie to responsive design using CSS3 media queries. I clearly understand how we target different devices using these media queries but the place where i am confused is BROWSER ZOOMING!!.

例如:这是我正常的 body css 规则

For Eg: This is my normal body css rule

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

当我想更改此 css 规则以定位宽度在 150px 和 600px 范围内的设备时，我添加了这个特定的媒体查询.

and when i want to change this css rule to target a devices whose width falls in the range of 150px and 600px i add this particular media query.

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

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


}

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

Problem: I am using Google Chrome and when i zoom in to about 200% then this particular media query comes into play.

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

推荐答案

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

After a lot searching. I found my answer.

-

我们不需要使用媒体查询明确定位浏览器缩放.当我们放大浏览器时，它的行为就像不同的设备.

例如:如果我们放大 175%，我们屏幕尺寸的像素宽度是 732px(你可以在 mqtest.io [存档] )，它是 ipad mini 的 768px 附近.因此，您可以使用常见的媒体查询同时定位 Ipad mini 和浏览器缩放 (@175%)

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

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

We don't need to target browser zooming explicitly by using media queries. When we zoom into our browser it behaves as different devices.

For eg: If we zoom at level 175% the pixel width of our screen size is 732px ( You can find relation between zooming and pixel width at mqtest.io [archived] ) which is nearby 768px of ipad mini. therefore you can target both Ipad mini and browser zooming(@175%) by using a common media query

i.e @media screen and (min-width:732px)

So if you target different devices using media queries (make site responsive for different Devices) then your browser zooming is itself taken into account.

这篇关于浏览器不同缩放级别的媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！