0

ブレークポイントに基づいて別のグリッド設定を使用する方法を理解しようとしていますが、それを機能させることができません。これが私のコードです。メディアクエリに応答ミックスインを使用しています。

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

もちろん、 respond-to よりat-breakpoint の方が簡単にできると思います。しかし、それは別の質問です。:)

于 2012-09-02T19:59:45.250 に答える