ZURB Foundation 6 - 媒体查询的变化

Question

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

1）breakpoint混合，向下而不是向上

• 这会导致从版本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) { }
}