Html 基础媒体查询范围错误 所以我不得不在一个基金会项目中修复一个bug，当我最终意识到它是什么原因时，它让我思考。

这个bug出现在1024px和1027px之间，宽度-导航将从移动状态转到桌面，但某些元素仍将保持移动版本

在基金会Stays.SCSS文件中，我发现：

//Media Query Ranges
$small-range: (0em, 40em);
$medium-range: (40.063em, 64em);
$large-range: (64.063em, 90em);
$xlarge-range: (90.063em, 120em);
$xxlarge-range: (120.063em);

正如您所看到的，到处都有间隙-例如，查询在64em处结束，下一个查询仅在64.063em处开始

所以移动导航将在64em处转换为桌面，转换为1024px宽度，但其他一些元素将仅在64.063em处显示，大约1027px

---

我已经编辑了变量并修复了它，但我想知道为什么它们会这样做？

从技术上讲，几乎所有浏览器上的

64.063em

都应该是

1025px

，除非您以某种方式调整了基本字体大小。您将从他们的文档中注意到，他们在注释中包含了这些值（为了便于阅读而进行了修剪）：

---

您会注意到它们引用了

1024px

和

1025px

。浏览器可能会以稍微不同的方式呈现该值，并导致差异。我想在Github上提出一个问题：

我所想到的是浏览器的松弛会导致延迟，这些范围的创建者可能会在所有范围之间设置相同的间隔，以使其看起来一致。可能有不同的原因，这只是一个场景，我不确定。唯一能回答这个问题的人是基金会的维护者。任何人的回答都是纯粹的猜测。

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px */

@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */