Question

所以我不得不修复一个基于基础的项目中的错误，当我终于意识到导致它的原因时，它让我思考。

该错误出现在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？

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

Answer 1

技术上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

基础媒体查询范围错误

1 个答案: