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平板电脑媒体查询无效

1 个答案: