0

これは私を早期の墓に送るつもりです、私を引き抜く助けを前もって感謝します.

短い話: 複数at-breakpointsのリスト要素は、タブレット グリッドからデスクトップ グリッドに移行するときに失敗しますが、モバイル グリッドからタブレットに移行するときにはうまく機能します。

ところで、モバイルファーストのアプローチから始めます。

マークアップは次のとおりです。

<html>
    .
    .
    .
    <div id="container">
        <div id="content">
            <article class="page">
                <ul id="members-frontpage">
                    <li class="member">
                    .
                    .
                    .
                    </li>
                </ul>
            </article>
        </div>
    </div>
    .
    .
    .
<html>

Susy の基本構成:

@include border-box-sizing;

//Mobile First config
$total-columns  : 4;
$column-width   : 4em;
$gutter-width   : 1em;
$grid-padding   : $gutter-width;

$show-grid-backgrounds  : true;

$legacy-support-for-ie6 : false;
$legacy-support-for-ie7 : false;

//Breaks
$break-to-medium: 30em 12; //break from phone to tablet
$break-to-large: 65em 25; //break from tablet to desktop

基本的なレイアウト:

#container {
    min-height: 100%;
    height: 100%;
    @include container($total-columns, $break-to-medium, $break-to-large);
    @include at-breakpoint($break-to-medium) {
        @include set-container-width;
    }
    @include at-breakpoint($break-to-large) {
        @include set-container-width;
    }
}

最後に、現在失敗しているコード:

何が機能しますか？を使用して、モバイル 4 列グリッドからタブレット 12 列グリッドへのブレークat-breakpoint。甘い！

何が失敗していますか？omega(2n)の 2 列表示を取得するためのタブレット グリッドから抜け出すと、2.member list items番目のリスト要素はomega(2n)必要のないデスクトップに移動したにもかかわらずそのままの状態を維持し、目的の 5 列表示を壊します。

Firebug から#members-frontpage .member:nth-child(2n)の抜粋: #2 リスト項目用。そこにいてほしくない。それが理にかなっていることを願っています。

.page {
    padding: 0 $grid-padding;
    @include at-breakpoint($break-to-medium) {
        @include susy-grid-background;
    }
    @include at-breakpoint($break-to-large) {
        @include susy-grid-background;
        padding: rhythm(1,16px) 0;
        @include squish(2,2);
    }
}

#members-frontpage { //ul
    @include clearfix;
    list-style: none;
    margin: 0;
    padding: rhythm(1,16px) 0 0 0;
    text-align: center;

    .member {  //li
        position: relative;
        min-height: 15em;
        margin: 0 0 rhythm(2,16px) 0;
        border-radius: .75em;
        border: .1em solid rgba($green, .4);
        background: rgba(255,255,255,.4);

        //Here We Go
        @include at-breakpoint($break-to-medium) {
            @include span-columns(6,12);
            @include nth-omega(2n);
    }
        @include at-breakpoint($break-to-large) {
            @include span-columns(5,25);
            @include nth-omega(5n);
        }

    } //end .member

    .member-title {
        @include rhythm(0,.25,.25,0,16px);
        border-top-left-radius: .75em;
        border-top-right-radius: .75em;
        border-bottom: .1em solid rgba($green, .4);
        background: lighten($yellow, 34%);
    }
    .member-logo {
        @include rhythm(0,1,1,0,16px);
        max-width: 96%;
        height: 100% !important;
    }
    .member-content {
        position: absolute;
        width: 100%;
        bottom: 0;
        @include rhythm(0,0,1,0,16px);
        font-weight: bold;
    }

} // end #member-frontpage

.member elementハックな解決策は、親の .scss ネストから携帯電話からタブレットへの のブレークを削除することです。

4

1 に答える 1

0

はい、Susy は、ブレークポイント間で何を持ち越して、何を持ち越さないかについて、何も推測できません。明確にする必要がありますが、スージーはそれを行うための 2 つのオプションを提供します。1 つは、基本的に既に行っていることですが、きれいな Susy 構文で記述されています。

@include at-breakpoint($break-to-large) {
  @include span-columns(5,25);
  @include remove-nth-omega(2n); // remove the old one
  @include nth-omega(5n);  // set the new one
}

もう 1 つのオプションは、メディア クエリをより厳密にスコープすることです。

$break-medium-only: 30em 12 65em; // min and max width settings

最小設定と最大設定の両方でブレークポイントを使用する場合、そのブレークポイントの内容はlargeスタイルに引き継がれません。

無関係: コンテナーのセットアップを簡素化することもできます。今、あなたは自分自身を複製しています。

@include container($total-columns, $break-to-medium, $break-to-large);

と同じです

@include container;
@include at-breakpoint($break-to-medium) {
  @include set-container-width;
}
@include at-breakpoint($break-to-large) {
  @include set-container-width;
}

どちらかだけが必要です。より長いアプローチの唯一の利点は、何らかの理由で必要な場合に、もう少し制御できることです。しかし、最も単純な出力は同じです。

于 2013-02-26T22:53:01.643 に答える