Neat 2.0 Grid - 媒体查询

Question

我正在尝试遵循媒体查询库 Neat grid here 的示例，但我无法让媒体查询运行。我可以让tablet 和phone 工作，但我无法让desktop 版本运行。我在下面包含了代码和屏幕截图：

SCSS

@import "../bourbon/bourbon";
@import "../neat/neat";

// Set a default grid.
$neat-grid: (
    columns: 12, // define some columns to match your mockup.
    gutter: 12px, // adjust gutters to match your mockup.
);

// Create a breakpoint.

$desktop: (
    columns: 12,
    media: 1280px,
);

$tablet-portrait: (
    columns: 8,
    media: 991px,
);

$phone-portrait: (
    columns: 6,
    media: 578px,
);

// This is "the grid" container.
.container {
    margin: 0 auto;
    max-width: 1280px;
}

// A row contains columns. grid-container creates a clearfix.
.row {
    @include grid-container;
}

HTML

<h2>Media Queries (<a href="http://neat.bourbon.io/docs/latest/#grid-media">link</a>)</h2>
<p class="note">Squish the viewport to see this in action!</p>
<div class="container container-media-queries">
    <div class="row">
        <div class="col"><pre>Test</pre></div>
        <div class="col"><pre>Test</pre></div>
    </div><!-- .row -->
</div><!-- .container-media-queries -->

桌面视图

平板电脑视图

电话查看

Answer 1

这里没有足够的信息，但似乎混淆在于grid-media mixin 的默认行为是首先是移动的。这意味着它生成的媒体查询将类似于@media (min:width XXXpx) {…}，这意味着它仅在该维度或更大处激活。查看https://github.com/thoughtbot/neat.bourbon.io/blob/master/source/assets/stylesheets/examples/article-layout.scss 以供参考