媒体查询+浏览器缩放

Question

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

我正在使用 Chrome 52.0.2743.116 米

问题是这样的：

当您使用浏览器放大到 125% 并调整浏览器大小直到平板电脑应该启动（最大宽度：1024 像素）时，似乎有时最大宽度：1024 像素或最小宽度都不是-width: 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 是一个不错的解决方案吗？我要疯了吗？

Answer 1

检查 <html> 元素得出答案：

所以页面宽度实际大于1024px小于1025px

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

Answer 2

您不需要使用最小值或最大值。如果你想为任何固定宽度应用任何 css 那么你可以使用如下媒体查询...... @media only screen and (width : 1024px) { /* Your Styles */ }

媒体查询+浏览器缩放

Media queries + browser zoom

css

media-queries