媒体查询 + 浏览器缩放答案

【问题标题】：Media queries + browser zoom媒体查询 + 浏览器缩放
【发布时间】：2023-04-02 14:17:01
【问题描述】：

当涉及到媒体查询和浏览器缩放时，我遇到了一个非常奇怪的问题。

我正在使用 Chrome 52.0.2743.116 m。

问题是这样的：

当您使用浏览器缩放到 125% 并调整浏览器大小直到平板电脑应该启动（最大宽度：1024 像素）时，似乎有一段时间既不是最大宽度：1024 像素也不是最小宽度: 1025px 是真的。

如果我将其更改为 max-width: 1024.9px - 它可以工作。

这是一个简单的例子：

<div class="box">
   Text
</div>
<div class="box">
   Text
</div>
<div class="box">
   Text
</div>

还有 CSS：

@media (max-width:768px) {
    .box {
        background: blue;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .box {
        background: red;
    }
}

@media (min-width:1025px) {
    .box {
        background: green;
    }
}

示例：http://codepen.io/tomusborne/pen/EyrNvG

放大 125%，然后缩小直到变成红色。逐像素调整大小，您会注意到平板电脑和桌面之间的一个像素根本没有背景颜色。

有人知道这里发生了什么吗？使用 1024.9px 是一个不错的解决方案吗？我是不是快疯了？

【问题讨论】：

无法在 Chrome/Win7 上重现您的问题。您也可以简化您的媒体规则并让覆盖完成工作 -> jsfiddle.net/azizn/uhsjf4p7

标签： css media-queries

【解决方案1】：

检查<html> 元素可以得到答案：

所以页面宽度其实是大于1024px小于1025px。

我建议对min-width 和max-width 使用完全相同的值。
这涵盖了所有宽度，没有间隙，如果发生冲突（即页面正好 1024px 宽），则文档中稍后出现的规则应优先。

【讨论】：

那行得通。奇怪的是，这不是更常见的实现方式——我已经搜索了好几个星期，但没有发现有人提到这种行为。感谢您的回答！

【解决方案2】：

您不需要使用最小值或最大值。如果您想为任何固定宽度应用任何 CSS，那么您可以使用如下所示的媒体查询... @media 仅屏幕和（宽度：1024 像素）{ /* Your Styles */ }

【讨论】：