Neat 2.0 平板电脑媒体查询不起作用

Question

在 Neat 1.8 中，我为我的媒体查询使用了 3 个断点，它们的位置如下：

$mobile: new-breakpoint(min-width 320px max-width 767px);
$tablet: new-breakpoint(min-width 768px max-width 1024px);
$desktop: new-breakpoint(min-width 1025px);

但在 Neat 2.0 中我无法让 $tablet 媒体查询工作，只有桌面和 $mobile 工作，但完全绕过 $tablet。

我的 SCSS 文件

$neat-grid: (
 columns: 12,
 gutter: 2em,
);

$mobile: (
 columns: 12,
 gutter: 1em,
 media: 'screen and (min-width: 320px) and (max-width: 767px)'
);

$tablet: (
 columns: 12,
 gutter: 1.1em,
 media: 'screen and (min-width 768px max-width 1024px)'
);

.element {
 @include grid-column(3);

 @include grid-media($mobile){
   @include grid-column(4);
 }

 @include grid-media($tablet){
   @include grid-column(6);
 }
}

我的网站很简单，因此我喜欢为我的媒体查询使用一个范围，例如：（最小宽度 768px 最大宽度 1024px。这非常适合 Neat 1.8，但升级后我无法获得 $tablet 去工作。

我错过了什么？？

Answer 1

我认为问题在于您的 SCSS 对于平板电脑部分略有错误。试试这个：

$tablet: (
 columns: 12,
 gutter: 1.1em,
 media: 'screen and (min-width 768px) and (max-width 1024px)'
);

Neat 2.0 平板电脑媒体查询不起作用

Neat 2.0 tablet media query not working

css

sass

neat

bourbon