javascript - ZURB Foundation 6 - 媒体查询的变化

Question

已关闭。此问题不符合 Stack Overflow guidelines 。目前不接受答案。

---

这个问题似乎与 help center 中定义的范围内的编程无关。 .

已关闭 7 年前。

Improve this question

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

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

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

2) MediaQuery.atLeast功能，方向不一致

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

Answer 1

您误解了断点 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) { }
}