1

グリッドを生成するために Singularity.gs 1.5.1 を使用しています。追加の溝の寸法を宣言すると、それらは無視されます。これは私が持っているものです:

@include add-grid(12);
@include add-gutter(20px);
@include add-gutter(30px at 640px);
@include add-gutter(40px at 1024px);
@include add-gutter-style('split' 'fixed');
@include sgs-change('output', 'float');

.column-1 {
  @include grid-span(1, 1);
}

これにより、すべての画面サイズで 20px のグリッドが生成されます。docs によると、これは以下を生成するはずです：

0 - 640px で 20px
のガター 640px - 1024px で 30px
のガター 1024px 以上で 40px のガター

なぜこれが機能しないのですか？

4

1 に答える 1

0

Singularityのレスポンシブ グリッド クイックスタート セクションを読んでください。

Singularity は、慣れ親しんだレスポンシブ グリッドではなく、レスポンシブ グリッド コンテキストを提供します。これにより、 を呼び出すときのグリッド オプションの対象を定義できますgrid-span。grid-spanグリッドに物をアタッチするには、適用したいときにメディア クエリ内で呼び出す必要があります。

float 出力スタイルで固定ガターを​​使用しているため、別の推奨事項は、パディングの変更を含む mixin を作成し、それを含めることです。

@mixin column-padding {
  padding-left: 10px;
  padding-right: 10px;

  @include breakpoint(640px) {
    padding-left: 15px;
    padding-right: 15px;
  }

  @include breakpoint(1024px) {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.column-1 {
  @include grid-span(1, 1);
  @include column-padding;
}
于 2015-02-09T19:29:49.473 に答える