Css 媒体查询+；浏览器缩放

在媒体查询和浏览器缩放方面，我遇到了一个非常奇怪的问题

我使用的是Chrome 52.0.2743.116 m

问题是：

当您使用浏览器放大到125%并调整浏览器大小，直到平板电脑开始工作（最大宽度：1024px）时，似乎有一个时刻，最大宽度：1024px或最小宽度：1025px都不正确

如果我将其更改为最大宽度：1024.9px-它可以工作

下面是一个简单的例子：

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

例如：

放大125%，然后向下调整大小，直到它变成红色。逐像素调整大小，你会发现平板电脑和桌面之间的一个像素没有背景色

有人知道这是怎么回事吗？使用1024.9px是一个不错的解决方案吗？我疯了吗？

检查

元素会得到以下答案：

因此，页面宽度实际上大于1024px，小于1025px

我建议对

min width

和

max width

使用完全相同的值
这涵盖了所有宽度，没有间隙，如果发生冲突（即页面恰好为1024×x宽），则应以文档中稍后出现的规则为准。

检查

元素会得到以下答案：

因此，页面宽度实际上大于1024px，小于1025px

我建议对

min width

和

max width

使用完全相同的值

---

这涵盖了所有宽度，没有间隙，如果发生冲突（即页面正好为1024×x宽），则文档中后面出现的规则应优先。

您不需要使用最小值或最大值。如果您想将任何css应用于任何固定宽度，则可以使用如下所示的媒体查询。。。 @仅媒体屏幕和（宽度：1024px）{

/*您的风格*/

---

}

您不需要使用最小值或最大值。如果您想将任何css应用于任何固定宽度，则可以使用如下媒体查询。。。 @仅媒体屏幕和（宽度：1024px）{

/*您的风格*/

---

}

无法在Chrome/Win7上重现您的问题。此外，您可以简化媒体规则，让覆盖完成工作->无法在Chrome/Win7上重现您的问题。此外，您还可以简化媒体规则，让覆盖完成工作。奇怪的是，这不是更常见的实现——我已经搜索了几个星期，没有发现有人提到这种行为。谢谢你的回答！这很有效。奇怪的是，这不是更常见的实现——我已经搜索了几个星期，没有发现有人提到这种行为。谢谢你的回答！

@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;
    }
}