错误：媒体查询最大宽度加Windows 10

Question

@media (max-width: 767px)应该影响767px及更低，但我遇到了问题，因为它没有在767px上应用我的CSS。经过一段时间的测试后，我注意到在Windows 7上工作正常但在Windows 10上没有。

我在两个操作系统中都有Chrome（v54.0.2840.71 m）。我也在Firefox中测试过，如果我在Win10上运行它，我也会遇到同样的问题。

这是jsfiddle。

正如你所看到的，min-width工作正常，所以我可以修复它恢复我的CSS并从最低分辨率到最高分辨率...这只是一个烦人的解决方案。我想知道是否有人知道另一种解决方法。我也试过了max-device-width，但仍然做错了......

由于

Answer 1

好的，感谢this link发布的Vladimir Pittner我发现了一个有效的解决方案。其中一条评论说将max-width值作为浮点值。因此，767px代替767.999px而不是XPath，而且似乎工作正常。

Answer 2

http://damienclarke.me/code/posts/those-1px-gaps-between-media-queries-can-be-a-problem

  

避免原因。   一个简单的解决方法是只使用最小宽度或最大宽度的媒体查询。这通常是一种健康的副作用，因为拥有真正的移动第一种方法来编写CSS规则。