整洁的新断点

Question

我正在使用整洁的波旁威士忌并尝试使用它的新断点mixin，但它不起作用。 我已经可以说我加载了第一个波本威士忌，而不是网格和breakpoints.scss而不是整齐的

所以当我写作时我可以看到变化：

@include media(max-width 500px) {
          @include span-columns(12); 
          background: red;
        }

但不是我写的时候：

$mobile: new-breakpoint(max-width 500px);
@include media($mobile) {
            @include span-columns(4);
             background: red;
          }

知道为什么吗？

Answer 1

尝试定义new-breakpoint声明中的列数，如下所示：

$mobile: new-breakpoint(max-width 480px 4);

如果您在常规CSS之后导入响应式CSS，也会出现问题。

最后，您应该将.scss输出更改为常规css（未缩小）以更好地理解代码。当您必须上传代码时，您可以更改设置并缩小CSS。

Answer 2

您可以使用Min和Max进行不同的分辨率。假设您需要高达480，那么您应该去

$mobile: new-breakpoint(max-width 480px 4);

如果你想使用平板电脑，你应该去

    $tablet: new-breakpoint(min-width 481px 8);

确保以最小上限开始。