0

Susy を使い始めて、その機能に非常に感銘を受けました。現時点では、4 つのメディア クエリがある Web を作成しています。

$mobile: 767px;
$tablet: 768px;
$small: 960px;
$large: 1200px;

最後の 2 つの $small と $large については、px と 10px のガターで幅が固定された 2 つの列が必要です。すべてのブラウザーで結果が同じに見えることを確認したいので、% にガターは必要ありません。

したがって、固定されたコロンヌスには、susy-breakpoint を使用します

@include susy-breakpoint($small, 24 1/1.5 split) {
    .container {
        @include container($small);
    }
    .main{
        .navigationWrap{
            @include span(24);
        }
        .articleWrap {
            @include span(668px);
        }
        .advertisment {
            @include span(240px);
            .advBanner{
                float: right;
            }
        }
    }

} // END of 960px mq

@include  susy-breakpoint($large, 24 1/1.5 split) {

    .container {
        @include container($large);
    }

    .main{
        .navigationWrap{
            @include span(24);//span(4);
        }
        .articleWrap {
            @include span(900px);
        }
    }

} // END of 1200px mq

それで、私の主な質問:グリッドをより細かく制御するためにガターを%ではなく(1/1.5のように)固定する方法とベストプラクティスは何ですか?

誰も答えていないので、固定された溝と列を取得するために「独自の方法」を考え出しました。

設定は次のとおりです。

$susy: (
  columns: 24,
  column-width: 40px,
  gutter-width: 10px,
  grid-padding: 10px,
  gutter-position: split,
  global-box-sizing: content-box,
  math: static
);

そしてメインscss：

//from 960px to 1200
@include breakpoint($small) {
    .container {
        @include container($small);
    }
    .header{
        .header-logoWrap{
            @include span(242px);
        }
        .header-bannerWrap {
            @include span(678px);
            img {
                float: right;
            }
        }
    }
    .main{
        .navigationWrap{
            @include span(930px);
        }
        .articleWrap {
            @include span(670px);
        }
        .advertisment {
            @include span(250px);
            .advBanner{
                float: right;
            }
        }
    }

} // END 960px to 1200

// from 1200 final
@include breakpoint($large) {
    .container {
        @include container($large);
    }
    .header{
        .header-logoWrap{
            @include span(242px);
        }
        .header-bannerWrap {
            @include span(918px);
            img {
                float: right;
            }
        }
    }   
    .main{
        .navigationWrap{
            @include span(1170px);
        }
        .articleWrap {
            @include span(910px);
        }
        .advertisment {
            @include span(250px);
            .advBanner{
                float: right;
            }
        }
    }
} // END of 1200px mq

しかし、主な質問はまだ未解決です: -グリッドとガターを固定するベストプラクティスは何ですか?

私が提案したコードでは、私は使用しています

スパン（ピクセル）

$susy% の列でスパンを使用しない場合のセットアップ方法

列数: 24、列幅: 40px、

4

1 に答える 1

0

設定マップでは、susy1 と susy2 の用語が混在しています。これらの設定のほとんどは Susy によって無視されています。これがあなたが望むものだと思います：

$susy: (
  columns: 24,
  column-width: 40px,
  gutters: 10px/40px, 
  gutter-position: split,
  global-box-sizing: content-box,
  math: static
);

gutters設定は常に相対的ですが、数学を使用しているため、出力はそうではありませんstatic。流体グリッドに静的ガターを配置することもできますが、それは別の問題です。gutter-widthエッジに5px grid-padding', so those have been removed. Split gutters will leave you with half-gutter padding on the grid (10px`という設定はありませ). If you want a fullん。次のようなことができます。

.container {
  padding: 0 gutters();
}
于 2014-06-22T21:19:54.230 に答える