基础媒体查询范围错误

时间:2015-11-17 09:53:48

标签: html css sass

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

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

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

1 个答案:

答案 0 :(得分: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 */

您会注意到他们引用了1024px1025px。浏览器有可能以稍微不同的方式呈现该值并导致差异。我会在Github上打开一个问题:https://github.com/zurb/foundation/issues