如何在Zurb foundation 4中使用断点？

Question

我想有3个断点.从广义上讲,我想为小型,中型和大型窗格配置网格.

查看基础网格的文档,为"小"和"大"提供了示例类名.

但是,我怀疑基础可以更灵活.所以我查看了文件_foundation-global.scss.果然,似乎有一系列窗格大小的数学函数和变量.

在网格文档中,我可以看到类似'small-12'和'large-3'的类名.

理想情况下,我想做'中等3'之类的事情.我可以用粉底的网格做这样的事吗？如果是这样,怎么样？

Answer 1

粉底有两种口味。

\n\n

您熟悉非语义 CSS 版本。它有一个预构建的 CSS 文件，其中包含所有可能的类组合的规则。当然，他们不能仅仅因为他们不是心灵感应者而预先满足你的所有需求。他们只针对两种网格大小开设了课程。

\n\n

另一种风格是语义 SASS 版本。它不使用预构建的 CSS 文件。使用 SASS 版本，您只需创建所需的样式，并按语义将它们应用到站点的元素。

\n\n

本页底部介绍了如何使用 SASS 制作网格。

\n\n

使用 SASS 版本的 Foundation，您没有预设媒体查询，您可以根据需要设置自己的 \xe2\x80\x94。

\n\n

Foundation 不提供任何用于处理媒体查询的工具，因此您必须手动设置它们。它还缺乏定义多个网格的工具。为了针对不同的屏幕尺寸或网站的不同部分使用不同的网格设置，您必须为每次使用重新定义基础网格设置，这是相当麻烦的。

\n\n

也许，Foundation 根本就不是创建响应式网格的最佳工具。相反，可以尝试使用Breakpoint Slicer \xe2\x80\x94 来实现Singularity，它们正是为此目的而创建的，并且在 StackOverflow 上拥有丰富的文档和来自开发人员的良好支持。

\n