媒体查询+浏览器缩放
当涉及媒体查询和浏览器缩放时，我遇到了一个非常奇怪的问题。
我使用的是 Chrome 52.0.2743.116 m。
问题是这样的：
当您使用浏览器缩放至 125% 并调整浏览器大小直到平板电脑应该启动（最大宽度：1024px）时，似乎有那么一刻 max-width: 1024px 或 min-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 是一个不错的解决方案吗？我是不是要疯了？
检查<html>元素即可得到答案：
所以页面宽度实际上是大于1024px小于1025px。
min-width我建议对和都使用完全相同的值max-width。
这涵盖了所有宽度，没有间隙，如果存在冲突（即页面宽度恰好为1024 像素），则文档中稍后出现的规则应优先。