Html 浏览器的Bug'；解读@media查询

很久以前有一个与此相关的问题，但从未得到回应或解决

我正在开发一个网站，它有不同的屏幕布局，这取决于视口/窗口的宽度

@media (min-width: 1120px) { }

/* behaviour as expected */

@media (min-width: 720px) and (max-width: 1119px) { }

/* inconsistent behaviour in Firefox and Edge, mixing elements of above and below */

@media (max-width: 719px) { }

在我的首选浏览器Chrome中，布局从最大屏幕宽度完美过渡到最小屏幕宽度。歌剧也是如此。然而，Firefox和Edge都表现出一种奇怪的行为，即单个过渡宽度（一个像素）会导致浏览器不知道如何解释内容

例如，当窗口过渡到最窄的媒体宽度时，标题栏变得更窄，不再需要容纳主菜单，菜单被隐藏（display:none；）并被旁边的一个小菜单图标替换，从而导致鼠标悬停时下拉。但在Firefox和Edge中，主菜单并不隐藏，而是塞满在徽标旁边，直到窗口再折叠一个像素，之后的行为与预期一致。这些CSS更改都在同一个@media声明下

有趣的是，这种行为并不一致。也就是说，从最大宽度到中间宽度的过渡是完美的，但从中间宽度到最小宽度的过渡是有问题的

假设这是分数大小计算的问题，我在@media查询中添加了高精度，如下所示：

@media (max-width: 719.999px)

而且，这种行为也不一致。如果我向上调整下限值（即719px至719.999px），则没有变化。但是，如果我将较高的值调低（即720px至719.001px），则问题部分解决。某些元素表现出预期的行为，但其他异常现象仍然存在。同样，更高的精度在Firefox上有效，但在Edge上无效

鉴于我所看到的行为，某些边界可能会导致问题，而其他边界则不会

---

这只是一个网站开发人员已经学会接受的已知错误，还是有一个简单的解决方案（除了简单地选择一组不同的边界）？

如果不看到您看到的内容，很难给出具体的答案，但是，浏览器可能正在以下面讨论的不同方式处理从一个媒体查询到下一个媒体查询的转换

最可能的原因：Windows显示设置

我假设您在提到Edge时使用的是Windows，我怀疑这可能是因为您在Windows-显示设置中更改了显示比例。例如，如果将其设置为125%，则可能会影响显示器的各个方面

所以这并不是媒体查询的错误，更不是因为浏览器没有有效地处理Windows显示设置的缩放而导致的差异

---

更新-既然您已经确认可以在发生这种情况的特定点停止，那么我很有信心这就是原因所在。在我昨天的测试中，当我研究这个问题时，我能够在缩放显示器时重现这种行为

使用以下带有红色边框的空块原始样式的测试用例，以及在

（最大宽度：1119px）

和

（最小宽度：1120px）

处应用的不同CSS，只有在缩放显示时才会发生问题

body{margin:50px 0；}
.测试{
边框：10px实心#f00；
高度：10px；
}
@介质（最小宽度：1120px）{
.测试{
背景：#ff0；
高度：500px
}
}
@介质（最小宽度：720px）和（最大宽度：1119px）{
.测试{
左边距：300px；
背景：#0FF；
高度：200px
}
}
@介质（最小宽度：460px）和（最大宽度：719px）{
.测试{
左边距：300px；
背景：#00f；
高度：200px
}
}
@介质（最大宽度：460像素）{
.测试{
背景：#ff0；
高度：100px
}
}

---

Firefox和Edge似乎以浮点数的形式计算并存储它们的视图端口宽度，媒体查询应用于这些值，而不是它们所代表的整个像素宽度。因此，媒体查询参数的解释方式有所不同

因此，当Chrome和Opera在720像素和719像素之间无缝过渡时，Firefox或Edge上的相同过渡可能会导致浏览器跳过查询并应用其他相关的默认样式

我最初的解决方案是应用特定于浏览器的@media查询来计算整个像素之间的值

@-moz-document url-prefix() /* Firefox */
{
    @media only screen and (min-width: 719.000001px) and (max-width: 719.999999px)
    {

然而，真正的问题是我指定媒体查询参数的方式。与编程语言不同，在编程语言中，我们可以（也应该）用等式和不等式（例如-1）定义数学参数≤ x≤ 1） ，CSS采用层次结构。例如，如果

@media（最大宽度：600px）

后跟

@media（最大宽度：400px）

，而两者在逻辑上不是互斥的，则后一个查询将优先于前者

---

所以我的解决方案是改变@media查询的结构方式，这样就只有max-width声明了。如果我们试图定义每个间隔的上限和下限，那么不同的浏览器解释限制的方式就会遇到上述问题。

您可以通过在查询之间完全没有间隙来避免任何设置特定小数的要求

例如：

(min-width 1px)      // Instead of (max-width: 719px)
(min-width 720px)    // Instead of (min-width: 720px) and (max-width: 1119px)
(min-width 1120px )  // Instead of (min-width: 1120px)

目前，您有一个中间频带，在其两侧各有一个“最大宽度”频带和一个“最小宽度”频带

---

上述替代解决方案仅使用1个方向（最小宽度），因此没有需要处理的间隙。

可能是一个愚蠢的问题，但使用像素的十进制数字有意义吗？比如，半个像素是一个东西吗？@sp00m：不，当然在这个上下文中不是，但是