使用“小”媒体查询扩展 Zurb Foundation 可见性类答案

【问题标题】：Extend Zurb Foundation Visibility Classes with a "tiny" media query使用“小”媒体查询扩展 Zurb Foundation 可见性类
【发布时间】：2014-02-28 18:18:08
【问题描述】：

适合想要挑战的 Zurb 基金会粉丝。我无法让我的大脑了解 Zurb Foundation 5 的可见性类。我从概念上理解发生了什么，但我正在尝试为可见性类添加额外的大小，即“微小”。在我需要的其余组件中，我一直在“微小”的媒体查询中工作，但是这种可见性的东西让我很恼火。我就是不知道是什么压倒了什么！

这里是original _visibility.scss file。

有没有人想尝试在.show-for-tiny、.show-for-tiny-only、.hide-for-small-down 以及所有媒体查询中需要的所有其他附加功能？

（根据反馈添加更多细节）查看引用的 _visibility.scss 文件时，您可以看到有几十个显示和隐藏类。对于所有媒体查询（tiny、small、large、xlarge、xxlarge）来说，代码需要是什么样的？

实际尺寸范围对我来说并不是那么重要，因为它们可能会在我之后更新。但是如果你想要一个估计，它是这样的：

$tiny-range: (0px, 480px); // (0em, 30em)
$small-range: (481px, 640px); // (30.063em, 40em);
$medium-range: (641px, 1024px); // (40.063em, 64em);
$large-range: (1025px, 1440px); // (64.063em, 90em);
$xlarge-range: (1441px, 1920px); // (90.063em, 120em);
$xxlarge-range: (1921px); //(120.063em);

【问题讨论】：

您想为 tiny 的最大范围使用什么 em 值？ Small 的范围是 0em - 40em。
@AdamHuffman 我总是可以更改范围，所以这并不重要，但现在我已经更新了问题。
你在 Ben 的项目中使用这个吗？
@BrettDeWoody 还没有，但我可能会在不久的将来。我还没有使用它，但它是我制作自己的“框架”的最后一块，使用添加了小尺寸的 Foundation 网格。

标签： sass zurb-foundation

【解决方案1】：

我在 Github 上 fork 了 repo，并添加了一个 tiny 的新媒体查询，对应于 0-30em。

出于演示目的，我将scss 编译为css 并创建了jsFiddle。通过调整浏览器的大小，您将看到各种可见性类生效。

网格在列折叠时保持不变。

有关更改的详细列表，请查看diff stats。

Download the source here.

【讨论】：