整洁的2.0网格-媒体查询

Question

我正在尝试遵循有关媒体查询基础Neat网格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供参考