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

Question

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

49

我是一个初学者，正在学习使用CSS3媒体查询实现响应式设计。我清楚地了解如何使用这些媒体查询来针对不同的设备进行定位，但我感到困惑的是浏览器缩放！

例如：这是我的常规body CSS规则。

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

当我想要更改这个CSS规则以便针对宽度在150像素和600像素之间的设备进行调整时，我会添加这个特定的媒体查询。

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

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


}

问题: 我正在使用 Google Chrome，当我将缩放比例放大到大约200％时，特定的媒体查询就会生效。

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

- bhavya_w

这是一篇关于此主题的文章：http://blog.55minutes.com/2012/04/media-queries-and-browser-zoom/ - Billy Moat

@BillyMoat 谢谢您的评论。我已经阅读了整篇文章，但那里的上下文与我所寻找的不同（在媒体查询中使用 px 的问题）。 - bhavya_w

@BillyMoat 需要类似的东西，比如说对于200%的缩放级别，在媒体查询中使用的最大宽度为600像素，而对于400%的缩放级别，则最大宽度为300像素。可能有一篇文章告诉我们...对于Chrome上的250%缩放，请使用此媒体查询...对于300%缩放，请使用这个特定的媒体查询。 - bhavya_w

根据[1]，自从27版本以来，Chrome的可怕错误（参见[2]）已经得到解决。 [1] http://alastairc.ac/2012/01/zooming-bug-in-webkit/ [2] http://code.google.com/p/chromium/issues/detail?can=2&q=&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=&id=86155 - David L

将媒体查询视为设备宽度而不是宽度。 - Mahi

3个回答

1

Firefox

请注意，在Firefox上，由于Firefox在缩放时计算屏幕宽度的方式，像素值不起作用。

要解决这个问题，您可以将固定像素值简单地转换为“em”或“rem”值。

- Jakub

0

我是这样解决的（.scss）

@media only screen and (min-height: 500px) and (max-height: 800px) and 
 (min-width: 600px) {
  margin-top: 0px;
}

- sawacrow

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bhavya_w · Accepted Answer

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

-

我们不需要通过使用媒体查询来明确地针对浏览器缩放。当我们缩放浏览器时，它会表现为不同的设备。

例如：如果我们将缩放级别调整为175％，则屏幕尺寸的像素宽度为732px（您可以在mqtest.io [已存档] 中找到缩放和像素宽度之间的关系），接近iPad mini的768px。
因此，您可以使用一个公共媒体查询同时针对iPad mini和浏览器缩放（@175％）

即：@media screen and (min-width:732px)

因此，如果您使用媒体查询针对不同设备（使网站对于不同设备响应），则浏览器缩放本身已被考虑在内。