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 -->

桌面视图

平板电脑视图

Phone 查看

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 以供参考

Neat 2.0 Grid - 媒体查询

Neat 2.0 Grid - media queries

neat

bourbon