可以在 Zurb Foundation 4 上设置中等列吗？答案

【问题标题】：Can you set medium columns on Zurb Foundation 4?可以在 Zurb Foundation 4 上设置中等列吗？
【发布时间】：2014-12-18 22:12:50
【问题描述】：

注意：这里有人问过但没有真正回答：How do I make use of breakpoints in Zurb foundation 4?

Foundation 4 上的 small 和 large 列非常方便，但 small 激活的时间可能比我想的要早一点 - 是有任何方法可以为较小但不是很小的分辨率设置 medium-columns 设置，例如800 * 600？

在我的具体情况下，我想要以下设置：

 <div class="small-12 medium-6 large-4 columns">First column</div>
 <div class="small-12 medium-6 large-8 columns">Second column</div>

【问题讨论】：

嘿，我正在寻找相同的东西，以便在大小之间有一个中等列或中等列类型，我今天找到了一个链接adioso.com/blog

标签： html css responsive-design media-queries zurb-foundation

【解决方案1】：

在 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

【讨论】：

【解决方案2】：

使用 Foundation 4，您只需包含 grid-5 Sass 或 CSS 文件即可启用中等网格。

@import "foundation/components/grid-5";

http://foundation.zurb.com/docs/components/grid.html#medium-grid

【讨论】：

中等网格（实验上）可用，但我发现块网格不支持 Foundation 4 中的中等断点。我创建了一个 _block-grid-5.scss 作为快速解决方案您可以在此拉取请求中找到：github.com/zurb/foundation/pull/2922

【解决方案3】：

从 4.3 版开始，Foundation 有了一个（实验性的）Medium Grid！您可以在他们的博文Foundation 4.3: Paving the Road to 5 中找到他们的断点和有关如何激活它的详细信息。

【讨论】：

【解决方案4】：

<div class='row'>
    <div id='foo' class='large-4 medium-6 small-12 columns'>        
    </div>
</div>

scss

@mixin respond-to($media) {
  @if $media == small-mode {
    @media only screen and (max-width: 420px) { @content }
  }
  @else if $media == medium-mode {
    @media only screen and (max-width: 768px) { @content }
  }
  @else if $media == large-mode {
    @media only screen and (max-width: 980px) { @content }
    }
  }
}

http://adioso.com/blog/

我还没有尝试过，但在接下来的几天里我会尝试一下，我会想出更多细节

【讨论】：

【解决方案5】：

由于 Foundation 已转换到版本 5，现在只有一个中等网格，您可以使用 medium-12 columns 等访问它。

【讨论】：