Neat 2.0 Grid - медиа-запросы - PullRequest
Новая
       38

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

0 голосов
/ 05 июля 2018

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

<code><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
Test
<! - .row -> <! - .container-media-query ->

Вид рабочего стола Desktop

Вид планшета Tablet

Просмотр телефона Phone

1 Ответ

0 голосов
/ 05 июля 2018

Здесь недостаточно информации, но кажется, что путаница заключается в том, что поведение по умолчанию grid-media mixin должно быть мобильным в первую очередь. Это означает, что генерируемый медиа-запрос будет выглядеть как @media (min:width XXXpx) {…}, что означает, что он активируется только в этом измерении, или больше . Проверьте https://github.com/thoughtbot/neat.bourbon.io/blob/master/source/assets/stylesheets/examples/article-layout.scss для справки

...