sass - 使用 "tiny"媒体查询扩展 Zurb 基金会可见性类

Question

对于想要挑战的 Zurb Foundation 粉丝。我无法理解 Zurb Foundation 5 的可见性类。我从概念上理解发生了什么，但我正在尝试为可见性类添加一个额外的大小，即“微小”。在我需要的其余组件中，我一直在“微型”媒体查询中工作，但这种可见性的东西正在踢我的屁股。我只是无法跟踪什么是最重要的!

这是 original _visibility.scss file .

有没有人想尝试一下 .show-for-tiny, .show-for-tiny-only, .hide-for -small-down，以及所有媒体查询中需要的所有其他添加？

(根据反馈添加更多细节)查看引用的 _visibility.scss 文件时，您可以看到有几十个显示和隐藏类。代码需要看起来像什么才能解释所有媒体查询的“微小”大小(微小、小型、大型、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);

Answer 1

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

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

直到列折叠时网格保持不变。

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

Download the source here .