不同缩放级别的媒体查询浏览器级别 [英] 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!!.
例如：这是我正常的身体css规则
For Eg: This is my normal body css rule
#body {
margin: 0 auto;
width: 70%;
clear: both;
}
，当我想更改此css规则以定位宽度下降的设备时在150像素和600像素的范围，我添加这个特定的媒体查询。
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;
}
}
问题：我使用Google Chrome，当我放大到大约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％的水平，我们屏幕尺寸的像素宽度是732像素（你可以在 http://mqtest.io/ ），这是附近的768px的ipad迷你。
，因此您可以通过使用公共媒体查询
（即 @media屏幕和（min-width：732px））来同时定位Ipad mini和浏览器缩放（@ 175％
因此，如果您使用媒体查询定位不同的设备（对不同的设备启用网站响应），则您的浏览器缩放本身也会考虑。 p>
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.
这篇关于不同缩放级别的媒体查询浏览器级别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
