css - 由于非整数宽度，媒体查询运行异常

Question

不能说这是一个真正的问题还是我只是偏执，但媒体查询的这种行为真的让我在过去的几个小时里发疯了。

让我们考虑一下这个非常简单的 CSS。

 body {background:yellow}

 @media (max-width:399px) {
   body {background:red}
 }

 @media (min-width:400px) {
   body {background:blue}
 }

当宽度为 399.333px 时会出现问题! (或 399 到 400 个整数之间的任何浮点值)

我的逻辑是，使用这种 CSS 样式页面永远不会变黄，对吧？当视口(viewport)大小小于 400px 宽度时它应该是红色的，当它大于 400px 时它应该是蓝色的。

当页面放大时，Windows 上的 Opera 浏览器(我目前使用的是 36.0)会发生奇怪的行为。我了解视口(viewport)宽度是使用实际视口(viewport)宽度和当前缩放级别和 计算的。此值应始终为整数 .但...

看起来 Opera 不会对影响整个页面的值进行舍入/下限/上限。当 Opera 发现 viewport-width 不是 399px 或 400px 而是 时，我得到黄色背景它是 399.333 像素 !？所以没有一个媒体查询满足条件。

我已经尝试在这里和网络范围内找到答案，但没有什么能解决这个问题。当我使用 em 时，这个问题已经发生在我身上。单位，所以我可以解决它们并将它们转换为像素，但我不能影响用户关于使用浏览器缩放功能的决定。

我能做些什么来防止这种情况发生吗？或者事情就是这样？

模拟此行为的最简单方法是点击 CTRL,+三倍，而不是在对象检查器中轻松移动垂直 slider 。

更新:

是的，我可以通过将每个媒体断点链接到前一个断点来使用“移动/桌面优先”的方法来修复它，但这不是我的问题的一部分。另外，默认 body风格在这里只是作为视觉辅助，改变并不能解决问题。

Answer 1

一个简单的解决方案可能如下:

 body {background:yellow}

 @media (max-width:400px) {
   body {background:red}
 }

 @media (min-width:400px) {
   body {background:blue}
 }

最后一个媒体查询中的规则将简单地覆盖之前存在的任何参数，只是因为顺序。

这样就不会出现这两个媒体查询未涵盖的情况/宽度: 399.9999 以内的所有内容...(无论如何)都满足第一个条件，400 以上的所有内容都将满足第二个条件，如果宽度正好是 400，第二个媒体查询中的规则将根据它们的顺序覆盖之前的规则。