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

Neat 2.0 tablet media query not working

在 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 去工作。

我错过了什么??

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

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