整洁的 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)'
);