0

我试图弄清楚如何根据断点使用不同的网格设置，但无法让它工作。这是我的代码。我正在使用 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; }
  };
}
4

1 回答 1

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

当然，我认为您可以使用断点而不是响应更轻松地做到这一点。但这是一个不同的问题。:)

于 2012-09-02T19:59:45.250 回答