Neat 忽略了手机上的网格答案

【问题标题】：Neat ignores the grid on mobileNeat 忽略了手机上的网格
【发布时间】：2015-03-16 16:12:54
【问题描述】：

我正在使用 Neat Grid。在 12-Grid 上一切正常，但在移动设备上却无法正常工作。

SCSS：

.how-it-works{
  @include outer-container;
  border: 1px solid green;

  &--box{
    border: 1px solid red;
    @include span-columns(4);
  }
}

网格设置

@import "neat-helpers"; // or "../neat/neat-helpers" when not in Rails

// Neat Breakpoints
$medium-screen: em(640);
$large-screen: em(860);

$mobile: new-breakpoint(max-width 500px 4);
$medium-screen-up: new-breakpoint(min-width $medium-screen 4);
$large-screen-up: new-breakpoint(min-width $large-screen 12);

// Debug
$visual-grid: true;
$visual-grid-color: yellow;
$visual-grid-index: front;
$visual-grid-opacity: 0.5;

HTML：

<section class="how-it-works">
      <h3>How it works</h3>
      <div class="how-it-works--box">
        <h6>Head</h6>
        <p>Text</p>
        <img alt="Customer ordering german candy." src="images/asian_girl.png">
      </div>
      <div class="how-it-works--box">
        <h6>Head</h6>
        <p>Text</p>
        <img alt="The Candy German handpicks high quality candy." src="images/bavarian_man.png">
      </div>
      <div class="how-it-works--box">
        <h6>Head</h6>
        <p>Text</p>
        <img alt="Postman with the german candy box." src="images/postman.png">
      </div>
    </section>

桌面： http://cl.ly/image/0r2f0N0l132y

手机： http://cl.ly/image/0j0n3e1K0V07

我认为移动版使用的是 12 列网格，但显示的是 4 列网格。

【问题讨论】：

您是否尝试查看编译后的 CSS 以查看它是否生成了您所期望的？

标签： html css sass bourbon neat

【解决方案1】：

答案就在您的网格设置文件中：

$mobile: new-breakpoint(max-width 500px 4);

In the Neat documentation，new-breakpoint 函数的最后一个参数是列数。

如果您愿意，您可以将移动视图更改为 12 列并相应地修改网格设置。

【讨论】：