Singularitygs:保持所有屏幕大小的移动网格

Question

出于某种原因，我的网格只显示所有屏幕大小的移动(3列)网格。我正在使用下面的值，不明白我做错了什么。如有任何建议，欢迎

@include add-grid(3);
@include add-grid(6 at 320px);
@include add-grid(12 at 740px);
@include add-gutter(1/3);

我正在使用下面的宝石

Using sass 3.3.14
Using breakpoint 2.5.0
Using singularitygs 1.2.1

Answer 1

仅仅定义网格上下文是不够的。

为了使响应网格工作，您必须显式地使用它们，例如：

@import "breakpoint";
@import "singularitygs";

@include add-grid(3);
@include add-grid(6 at 320px);
@include add-grid(12 at 740px);
@include add-gutter(1/3);

@include add-gutter(0.25);

.foo {

  background-color: deeppink;
  min-height: 10em;

  // Mobile grid
  @include float-span(1);

  // Medium grid
  @include breakpoint(320px) {
    @include float-span(1);
  }

  // Large grid
  @include breakpoint(740px) {
    @include float-span(1);
  }
}

请注意，从较小的断点到较大的断点都会发生泄漏，除非被覆盖，否则它们会破坏您的布局。为了避免这种情况，请将媒体查询设置为最小宽度和最大宽度.有关详细信息，请参阅断点文档。