0

新しいプロジェクトのために Singularity にひねりを加えました。今までSusyを使っていました。通常、私は質問を個別に投稿することを好みますが、現在の場合、質問は 1 つの中心点を扱って接続されています。設定は以下です。

私のメイン ページは、背景画像を含むヘッダーとグラデーションを含むフッターであり、コンテンツを含むコンテナーはマージンで囲まれている必要があります。メインのマークアップ スケルトンは次のようになります。

<div class="mainwrap">
  <header class="container"></header>
  <div class="container"></div>
</div>
<div class="footwrap">
  <footer class="container">
</div>

ラップとコンテナの基本的なスタイリングは次のようになります。

%wrap {
    width:100%;
    @extend %clearfix;
}

.mainwrap {
    @extend %wrap;
    background: image-url('texturetastic_gray.png') repeat top left;
    @include box-shadow(black 0.2em 0.2em 0.5em);
    margin-bottom:1em;
}
.footwrap {
    @extend %wrap;
    background-color: #484d51;
    @include background-image(linear-gradient(left, rgb(72, 77, 81), rgb(22, 25, 28)));
    @include filter-gradient(rgb(72, 77, 81), rgb(22, 25, 28), horizontal);
}

.container {
    @include background-grid;
    max-width:900px;
    margin: 0 auto;
    @extend %clearfix;
}

今、私は2つの問題があります:

1) ページに 2 つのギャップがあります。

二つのギャップ

最初のものは、overflow-x: hidden; で修正できます。%wrap または .mainwrap で。しかし、.mainwrap と .footwrap の間の 2 番目のギャップは、それでは修正できません。.mainwrap と .footwrap の間の境界の望ましい外観は、次のようになります。メインラップの下に視覚的に表示されるフッターとメインラップには、目に見えるドロップシャドウがあります。

望ましい状態

しかし、説明されている html と css のセットアップでは、既に上で見たようなギャップが常に発生します。

ギャップのある現状

理由はありますか？:(

2) コンテナーの設定 これは、私が最も問題を抱えている最も不確実な部分であり、処理するベスト プラクティスは何かを自問します。私の基本設定は次のとおりです。

$grids: 4;
$grids: add-grid(6 at 550px);
$grids: add-grid(9 at 750px);
$grids: add-grid(12 at 900px);
$grids: add-grid(16 at 1200px);
$grids: add-grid(18 at 1400px);

$gutters:0.25;
$gutters: add-gutter(.20 at 900px);
$gutters: add-gutter(.15 at 1200px);

そして.containerのために私は追加しました：

padding-left: gutter-span();
padding-right: gutter-span();

Github の Singularity のフォーラム スレッドの 1 つで提案されているように。しかし、ベストプラクティスが何であるかはまだわかりません。基本的に、margin: 0 auto; に切り替わる最小のパディングがあります。コンテナーの定義された最大幅に達したとき。padding-left/right と gutter-span および max-width の方法は適切ですか?

コンテナの基本的な列数と最大幅を定義する必要があることを意味しますか。その最大幅に達したら、最大幅を上に変更し、add-grid() でアクティブなグリッド設定を再定義して、パディングを調整します。コンテナーの最大幅が 1400 または 1600px になるまで、これを続けます。また、より広いビューポートのブレークポイントでは、ガター スパンの倍数を使用する必要があります。要約すると、例えばそのようになりますか？

$grids: 4;
$grids: add-grid(8 at 600px);
$grids: add-grid(12 at 900px);
$grids: add-grid(16 at 1400px);

$gutters:0.25;
$gutters: add-gutter(.20 at 600px);
$gutters: add-gutter(.15 at 900px);
$gutters: add-gutter(.10 at 1400px);

.container {
    @include background-grid;
    max-width:600px;
    @include breakpoint(600px) {
        max-width: 900px;
    }
    @include breakpoint(900px) {
        max-width: 1400px;
    }
    @include breakpoint(1400px) {
        max-width: 1600px;
    }

    margin: 0 auto;
    padding-left: gutter-span();
    padding-right: gutter-span();
    @include breakpoint(600px) {
        padding-left: gutter-span(2);
        padding-right: gutter-span(2);
    }
    @include breakpoint(900px) {
        padding-left: gutter-span(3);
        padding-right: gutter-span(3);
    }
    @include breakpoint(600px) {
        padding-left: gutter-span(4);
        padding-right: gutter-span(4);
    }
    @extend %clearfix;
}

しかし、基本的に、コンテナーで細かい方法で物事を制御したい場合、それはかなりの数のブレークポイントにつながりますか? または、何とかよりエレガントなソリューションがありますか?

よろしくラルフ

4

1 に答える 1

1

.mainwrap と .footwrap の間の 2 番目のギャップは、それでは修正できません。.mainwrap と .footwrap の間の境界の望ましい外観は、次のようになります。メインラップの下に視覚的に表示されるフッターとメインラップには、目に見えるドロップシャドウがあります。

にmargin-bottom: 1em応募しました.mainwrap。コメントアウトすれば準備完了です。

ベストプラクティスが何であるかはまだわかりません。基本的に、margin: 0 auto; に切り替わる最小のパディングがあります。コンテナーの定義された最大幅に達したとき。

  1. なぜメディアクエリを複製するのですか? 同じ呼び出し内でmax-widthとpaddingスタイルの両方を記述できます。breakpointしかし問題は、最大幅を変更する必要がないということです。max-width を静的にのみ最大の最大値に設定します。
  2. max-widthとpaddingをmargin 0 auto同時に申し込むことができます。それらを選択的に適用する必要はありません。これらのスタイルを適用する要素には注意してください。
  3. たとえばpadding: 0 1em、静的なパディングに問題がない場合は、ブレークポイントさえ必要ありません。グリッド サイズに相対的なパディングが必要な場合は、ためらわずにブレークポイントを使用してください。かさばると感じたら、ミックスインを作成してください。
于 2013-12-11T07:27:19.147 に答える