5

我想有3个断点。从广义上讲，我想为小型、中型和大型窗格配置我的网格。

查看基础网格的文档，为“小”和“大”提供了示例类名。

但是，我怀疑基础可以更灵活。所以我查看了文件_foundation-global.scss。果然，它似乎具有适用于各种窗格大小的数学函数和变量。

在网格文档中，我可以看到像“small-12”和“large-3”这样的类名。

理想情况下，我想做一些类似'medium-3'的事情。我可以用基金会的网格做这样的事情吗？如果是这样，怎么做？

4

6 回答 6

2

在 Zurb Foundation 4 中，我在网格列中添加了以下内容。只需在您的基础全局变量和网格的@import 之后添加它。

@if $include-html-grid-classes != false {

  /* Styles for screens that are atleast 768px and max width 1024px */
  @media #{$small} and (max-width: 1024px) {

    @for $i from 1 through $total-columns {
      .medium#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
    }

    @for $i from 0 through $total-columns - 1 {
      .row .medium-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
    }

    @for $i from 1 through $total-columns - 1 {
      .push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
      .pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
    }

    .column.medium-centered,
    .columns.medium-centered { @include grid-column($center:true, $collapse:null, $float:false); }

    .column.medium-uncentered,
    .columns.medium-uncentered {
      margin-#{$default-float}: 0;
      margin-#{$opposite-direction}: 0;
      float: $default-float !important;
    }

    .column.medium-uncentered.opposite,
    .columns.medium-uncentered.opposite {
      float: $opposite-direction !important;
    }

  }

}

现在您可以像使用小型和大型网格一样使用介质。

https://gist.github.com/poeticninja/5985220

于 2013-07-12T15:25:18.837 回答
1

中等网格的新实验功能，这是CSS 文件

于 2013-10-29T12:28:41.977 回答
0

也许我来晚了，但我不同意 lolmaus 反对 Foundation 的总体论点（除非你真的需要超级骗子网格颗粒化）。

对于多年来一直使用自己的本土 CSS 网格系统的人来说，我发现 Foundation 3（我尝试的第一个版本）非常擅长让我始终以响应式方式为桌面 -> 平板电脑 -> 手机构建网站让我控制图形密集型设计和布局。（而且我想我刚刚读到 F4 已经为不同的格式实现了小型和大型网格系统。）

我无法与任何其他系统交谈，因为我没有尝试过它们（除了 Bootstrap，它比我需要的更全面），但如果你是一个动手设计的设计师，在 HTML5/CSS3 方面有一些好的印章，你'与Foundation一起会做得很好。

如果有帮助，我在 F3 中的断点设置为 1200 或更多、1199-768 和 767 或更少（仅在手机上水平浏览网站）。

于 2013-05-20T14:26:07.150 回答
0

Foundation 的流体网格是围绕 768 像素的单个断点构建的，因此基本上是移动设备和桌面/平板电脑。一切都围绕着这个概念，这就是为什么你有像hide-for-small和这样的类show-for-small。

任何额外的断点都必须使用媒体查询自定义完成，但是由于 Foundation 是一个流体网格，因此实现起来并不像您想象的那样烦人。这个想法是，您的站点的“大型”（例如桌面）版本应该合理地扩展到“中”（平板电脑）视口，而不需要对 CSS 进行太多广泛的重构。

我在 F3 中构建的大多数网站都在 768px 断点处显着转换，然后我编写了一些其他媒体查询来调整高于该断点所需的任何内容（所以通常我有一些 CSS 调整，用于更多取决于依赖的任意断点在设计上，但例如在一个行宽为 1150 像素的网站上可能是 900 像素和 1050 像素）。如今的平板电脑具有相当高的分辨率，并且在大多数情况下倾向于显示桌面风格的布局。

lolmaus 确实有一点，Foundation 不仅仅是一个响应式网格工具。还有其他更轻量级的框架提供了更精细和更方便的方式来自定义您的网格大小和行为，而 Foundation 是一个完整的前端框架，旨在基于单断点概念进行快速原型设计。

您还可以添加一个辅助（例如平板电脑/台式机）断点而不会太麻烦，但这需要一些工作。但是，我建议您尝试使用 Foundation 并问自己是否真的需要 3 组不同的样式而不是 2 组。我之前已经建立了针对桌面/平板电脑/移动三合会的响应式网站，老实说，我从来没有回头看大约六个月前，我开始使用 Foundation。

于 2013-07-11T17:44:44.910 回答
0

粉底有两种口味。

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

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

本页底部描述了如何用 SASS 做网格。

使用 SASS 版本的 Foundation，您无需预设媒体查询，您可以根据需要设置自己的媒体查询。

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

很可能，Foundation 根本不是创建响应式网格的最佳工具。相反，请尝试使用Breakpoint Slicer的Singularity——它们正是为此目的而创建的，在 StackOverflow 上有大量的文档和来自开发人员的体面支持。

于 2013-04-17T06:06:08.920 回答
0

可以在 Zurb Foundation 4 上设置中等列吗？ http://adioso.com/blog/

于 2013-07-11T17:27:57.113 回答