Question

我正在建造的静态八达通网站中使用Bourbon和Neat。除了打开指南（_grid-settings.scss）之外，我正在使用$visual-grid: true;文件而不做任何更改。在我的screen.scss之后我在Bourbon之后加载网格设置，但在Neat之前：

@import "bourbon/bourbon";
@import "grid-settings";
@import "neat/neat";

由于我使用的是默认网格设置，因此小屏幕应该只有4列宽。

$phone-portrait: new-breakpoint(max-width $tiny-screen 4); // 450px

当我在小于450像素的屏幕上查看网站时，可视网格显示4列，但布局仍使用12列。我有几个地方我在布局中使用4列div，在移动设备上这些应该是全宽，因为页面只有4列，但它们只是页面宽度的三分之一。我可以通过将@include span-columns(4)替换为@include span-columns(12)来验证移动设备是否仍在使用12列。 12列div是移动设备上唯一的全宽div。

为什么Neat在指南和布局中使用相同数量的列不是？

Answer 1

我认为您只是错过了代码中的逗号，认为您需要：

$phone-portrait: new-breakpoint(max-width $tiny-screen, 4); // 450px

希望这有帮助

Answer 2

事实证明问题是由于在断点内的div上没有使用@include span-columns(4)来改变列数（$phone-portrait: new-breakpoint(max-width $tiny-screen 4);）。起初这看起来很奇怪，直到我明白实际发生了什么。当我将div设置为跨越4列时，neat获取列数并将它们除以当前断点处的列总数。在我的情况下，这将是0.333，然后用作div的宽度百分比。问题是，即使后来改变的总列数做了一个断点，这也不会改变。我的div总是宽33.3％。我需要做的是在断点的媒体选择器中重复span-columns include，如下所示：

$phone-portrait: new-breakpoint(max-width $tiny-screen 4);

.my-div {
  @include span-columns(4);
}

@include media($phone-portrait) { 
    .my-div {
      @include span-columns(4);
    }
}

这可确保我的div在$phone-portrait断点处的宽度为100％。

即使指南显示4列，Bourbon Neat仍使用12列

2 个答案: