Html 浏览器不同缩放级别的媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22223866/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Media Queries for Different zoom Levels of Browser
提问by bhavya_w
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!!.
我是使用 CSS3 媒体查询进行响应式设计的新手。我清楚地了解我们如何使用这些媒体查询定位不同的设备，但我感到困惑的地方是 BROWSER ZOOMING!!。
For Eg: This is my normal body css rule
例如：这是我正常的 body css 规则
#body {
margin: 0 auto;
width: 70%;
clear: both;
}
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.
当我想更改此 css 规则以定位宽度在 150px 和 600px 范围内的设备时，我添加了这个特定的媒体查询。
@media only screen and (min-width:150px) and (max-width:600px){
#body {
margin: 0 auto;
width: 90%;
clear: both;
}
}
Problem: I am using Google Chrome and when i zoom in to about 200% then this particular media query comes into play.
问题：我正在使用谷歌浏览器，当我放大到大约 200% 时，这个特定的媒体查询就会起作用。
How do i know what media queries to write for different zooming levels or to put another way whats the relation between browser zooming levels and pixel width.
我怎么知道要为不同的缩放级别编写哪些媒体查询，或者换一种方式，浏览器缩放级别和像素宽度之间的关系是什么。
回答by bhavya_w
After a lot searching. I found my answer.
经过一番寻找。我找到了我的答案。
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 http://mqtest.io/) 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.
我们不需要通过使用媒体查询明确定位浏览器缩放。当我们放大浏览器时，它的行为就像不同的设备。
例如：如果我们放大 175%，我们屏幕尺寸的像素宽度是 732px（你可以在http://mqtest.io/找到缩放和像素宽度之间的关系），它靠近 ipad mini 的 768px。因此，您可以使用常见的媒体查询，
即@media screen 和 (min-width:732px)来定位 Ipad mini 和浏览器缩放（@175% ）
所以如果您使用媒体查询定位不同的设备（使网站对不同的设备做出响应）那么您的浏览器缩放本身就会被考虑在内。
