ZURB Foundation 6 - 媒体查询的变化

Question

如果您阅读 ZURB Foundaiton 6 Media Queries 的文档，您会发现与 ZURB Foundation 5 相比有一些变化。我对新功能几乎没有疑问，因为我不明白导致变化的原因。

1) breakpoint mixin，向下而不是向上

• 这会导致从版本 5 迁移到版本 6 时遇到困难。为什么没有继续使用向上方向的选项？
• 从上到下改变方向的原因是什么？仅小型设备的样式不同，中型和大型设备使用相同的样式（例如菜单）的情况仍然很常见。再说一次，我不明白为什么没有上下关键词选择的选项。
• 就移动优先设计方法而言，哪个方向更好？这些变化是否以某种方式与此相关？

2)MediaQuery.atLeast函数，方向不一致

• 此函数告诉您屏幕是否有某个尺寸或大于此尺寸。这与 breakpoint mixin（使用 down 关键字）完全相反。为什么行为不一样或者为什么我们没有任何选择？

Answer 1

你误解了 breakpoint mixin。只有当你在 mixin 的参数中明确添加 down 关键字时，它才会下降。如果您只是为参数输入断点的名称，那么它会从该断点上升，不需要额外的关键字。如果您添加关键字 only 那么它只会影响该断点。

这直接取自 Foundation 6 Docs：

.element {
  // Only affects medium screens and larger
  @include breakpoint(medium) { }
  // Only affects medium screens and smaller
  @include breakpoint(medium down) { }
  // Only affects medium screens, not small or large
  @include breakpoint(medium only) { }
}