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

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

为了使您的响应式网格有效，您必须明确使用它们，例如： G：

@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);
  }
}

请注意，跨越从较小的断点泄漏到较大的断点，除非被覆盖，否则它们会弄乱您的布局。为了避免这种情况，请使用min-width和max-width设置媒体查询。有关详细信息，请参阅断点文档。

Singularitygs：移动网格保持所有屏幕尺寸

1 个答案: