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

Question

我想有3个断点。概括地说，我希望为小窗格、中窗格和大窗格配置我的网格。

查看foundations grid的文档，提供了"small“和"large”的类名示例。

然而，我怀疑foundation可以比这更灵活。所以我查看了file _foundation-global.scss。果然，它似乎有数学函数和变量的窗格大小的范围。

在grid的文档中，我可以看到像'small-12‘和'large-3’这样的类名。

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

Answer 1

在Zurb Foundation 4中，我使用以下内容将medium添加到我的网格柱中。只需在您的基金会全局变量和网格的@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;
    }

  }

}

现在你可以像使用小网格和大网格一样使用medium。

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

Answer 2

这就是medium grid的一个新的实验特性-- CSS file

Answer 3

Foundation有两种风格。

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

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

this page的底部描述了如何使用SASS创建网格。

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

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

可能，Foundation根本不是创建响应式网格的最佳工具。取而代之的是，尝试使用Breakpoint Slicer的Singularity -它们正是为此目的而创建的，拥有丰富的文档和来自StackOverflow上开发人员的良好支持。