Question

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

我使用的是Chrome 52.0.2743.116 m。

问题在于：

当您使用浏览器放大到125％放大并调整浏览器大小直到平板电脑应该启动（最大宽度：1024px）时，似乎有一个时刻，最大宽度：1024px或最小宽度：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

您不需要使用min或max。如果你想为任何固定宽度应用任何CSS，那么你可以使用如下的媒体查询... @media only screen and（width：1024px）{ /* Your Styles */ }

媒体查询+浏览器缩放

2 个答案: