当涉及到媒体查询和浏览器缩放时，我遇到了一个非常奇怪的问题。
我使用的是 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 是一个不错的解决方案吗？我要疯了吗？
最佳答案
检查 <html>元素包含答案:
所以页面宽度实际上大于1024px小于1025px。
我建议对 min-width 使用完全相同的值和 max-width .
这涵盖了所有宽度，没有间隙，如果发生冲突(即页面正好 1024px 宽)，则文档中稍后出现的规则应优先。
关于css - 媒体查询+浏览器缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38981132/