5

私の最大のデスクトップ ビュー/ブレークポイントで、Susy のデモ ページ ( http://susy.oddbird.net/demos/magic/ ) と同じ動作を実現しようとしました - コンテナーの最大幅に達したとき、パディングまたはマージンのみコンテナ自体が最大幅のままである間、両側で成長しています。

しかし、好ましいユニットのようないくつかの点と、説明されているパディング/マージンの動作を達成するための最良の機能は何かについて、私はまだ少し混乱しています。

現時点での私の一般的な Susy 設定は次のとおりです。

$total-columns: 24;
$column-width: 3%;
$gutter-width: 1%;
$grid-padding: 0;

具体的なScss部分はこんな感じ。コンテナを含めて、スキッシュでマージンを付けました。

.sectionwrap{
    @include container;
    @include squish(3,3);
    @include breakpoint($medium) {
        @include squish(2,2);
    }
    @include breakpoint($small) {
        @include squish(1,1);
    }
}

しかし、問題は、コンテナーと押しつぶされた領域の両方が成長し、成長し、比例して成長することです。おそらく1つの欠点は、使用される単位がパーセンテージであることですか? 代わりに em または rem を使用する方が合理的でしょうか?

合計して最大幅 (列数 * (列幅 + ガター幅)) に達すると、理論的には押しつぶされた領域のみが自動的に成長し続けることを意味しますか? しかし、私は試してみましたが、失敗しました。

私も設定しようとしました：

$container-width: 1000px;

しかし、運もありません。ヒントをいただければ幸いです。よろしくラルフ

更新: 最初にサイトをモバイル用に再配置しましたが、最初は squish() インシデントによって少し誤解されていた Susy グリッドの概念全体を理解したと思いました。:sしかし、どういうわけか、私はまた何か間違ったことをしていると思います。

// breakpoint variable set for Breakpoint - value is converted to em by Breakpoint
$fivehundred: min-width 500px;   

//basic Susy settings for the initial mobile viewport
$total-columns: 8;  
$column-width: 3em;
$gutter-width: 1em;
$grid-padding: 1em;

//modified Susy setting for a larger viewport
//intentionally chose larger numbers to see a significant change at the breakpoint
$largerviewport: 12,5em,1em,1em;

//the main content area wrapper class where i initially wanted to enlarge the container
//at each breakpoint step by step
.sectionwrap{
    @include container;
    @include breakpoint($fivehundred) {
        @include with-grid-settings($largerviewport);
    }
}

どういうわけか、コンテナーの幅は $fivehundred ブレークポイントを超えて、さらに $largerviewport の値ではなく初期値のままになります。どういうわけか、これがラッパー クラスのコンテナを変更する間違った方法ではないかと心配していますか? 私の側の推論の別のエラーですか？よろしくラルフ

更新 2: わかりました、それは実際には奇妙です。私は今、次のSassコードを試しました:

.sectionwrap{
    @include container;
    background-color: red;
    @include breakpoint(500px) {
        @include with-grid-settings(24,7em,4em,1em); 
        background-color: green;
    }
}

そして、返された CSS は次のようになります。

.sectionwrap {
  max-width: 31em;
  padding-left: 1em;
  padding-right: 1em;
  margin-left: auto;
  margin-right: auto;
  background-color: red; }
      .sectionwrap:after {
         content: "";
         display: table;
         clear: both; }
  @media (min-width: 31.25em) {
    .sectionwrap {
      background-color: green; 
    } 
}

どういうわけか with-grid-setting 全体が除外されましたか?

更新 3: わかりました。with-grid-settings 関数を含めた後、コンテナーの幅を設定する必要があることに気づいていません。ガターを変更したばかりの別の例では、必要ありませんでした。しかし、ここにあるようです。

.sectionwrap{
    @include container;
    @include breakpoint($fivehundred) {
        @include with-grid-settings($columns: 12, $width: 3em, $gutter: 1em, $padding: 1em){
                @include set-container-width;
        } 
    }
}

更新 4 同様の問題に遭遇する可能性のある他の人のために、それは役立つかもしれません. with-grid-settings 関数で設定された値、特にパディング値が尊重されていないのはなぜだろうと思いました。次に、コンテナの幅を設定すると最大幅の値のみが設定されることに気付きました。ただし、入力されたすべての値をグリッドに適用するには、コンテナ mixin を再度追加する必要があるため、maxwidth とパディングが利用されます。しかし、今ではすべてがうまく機能しているようです。;) 時間がかかりました。乾杯 r.

4

1 に答える 1

5

%ユニットとミックスインの両方があなたにsquish不利に働いています。Susy は、グリッドの定義に使用したのと同じ単位で、デフォルトでコンテナーの最大幅を設定します。実際、これらのユニットが使用されるのはそれだけです。max-width を にしたい場合はpx、 でグリッドを定義しますpx。あなたがem使用したい場合em。$container-widthはデフォルトのオーバーライドであるため、機能するはずです。何がうまくいかなかったのかを知るために、それを試したときに実際のコードを確認する必要があります。

これだけをお勧めします：

$total-columns: 24;
$column-width: 30px; // adjust as needed
$gutter-width: 10px; // adjust as needed
$grid-padding: 0;

.sectionwrap{
  @include container;
}

それ以外のものは、実際には物事を過度に複雑にしています。

于 2013-07-22T06:27:48.987 に答える