Question

我正在尝试弄清楚如何使用基于断点的不同网格设置但无法使其工作。这是我的代码。我正在使用response-to mixin进行媒体查询。

$breakpoints: 'screenSmall' 480px 768px,
              'screenMedium' 768px 1279px,
              'screenXlarge' 1441px;                                                   

$total-columns: 4;
$column-width: 5em;
$gutter-width: 1em;
$grid-padding: $gutter-width;

[role="main"] {
  @include container($total-columns);
  background: #aaa;
  @include susy-grid-background;
}

@include respond-to('screenSmall')
  @include with-grid-settings(8,4em,1.5em,1em) {
    [role="main"] { @include container; }
  };
}

@include respond-to('screenMedium')
  @include with-grid-settings(12,4em,1.5em,1em) {
    [role="main"] { @include container; }
  };
}

Answer 1

究竟什么不起作用？对于不同的断点，根本没有变化，或者根本没有改变背景网格图像？我在猜测后者。如果您希望背景响应新设置，则需要使用这些设置重新声明背景：

@include respond-to('screenSmall')
  @include with-grid-settings(8,4em,1.5em,1em) {
    [role="main"] { 
      @include container; 
      @include susy-grid-background;
    }
  };
}

@include respond-to('screenMedium')
  @include with-grid-settings(12,4em,1.5em,1em) {
    [role="main"] { 
      @include container; 
      @include susy-grid-background;
    }
  };
}

当然，我认为您可以使用at-breakpoint更轻松地完成此操作而不是回复。但这是一个不同的问题。：）

使用带有断点的网格设置的示例

1 个答案: