Neat 2.0 Grid - медиа-запросы

Question

Я пытаюсь следовать примерам для баз медиазапросов. Аккуратная сетка, но у меня возникают проблемы с запуском медиазапросов. Я могу получить 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 для справки.