所以我不得不修复一个基于基础构建的元素中的一个错误，当我终于意识到是什么导致了它时，它让我开始思考。
错误出现在 1024px 和 1027px 宽度之间 - 导航将从移动状态转到桌面，但某些元素仍会保留在移动版本中。
在 foundation _settings.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，除非您以某种方式调整了基本字体大小。您会从他们的文档中注意到他们在评论中包含了这些值(为了便于阅读而进行了修剪):
@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 */
您会注意到它们引用了 1024px 和 1025px。浏览器可能会略微不同地呈现该值并导致差异。我会在 Github 上提出一个问题:https://github.com/zurb/foundation/issues
关于html - 基础媒体查询范围错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33753830/