1

これが問題です。私はSusyに慣れていないので、これを達成するための最善の方法は完全にはわかりませんが、bodyクラスとすでに以下に設定されているメディアクエリに基づいて.hfeeddivにレイアウトを適用しようとしています。 。

これが理由です。私はWordPressでこれを行っていますが、本体に適用されたCSSクラスを使用してスタイル設定されたさまざまなレイアウトがあります。具体的には、2つのクラスは.full-width-contentと.content-sidebarです。セレクターは、コンテナー全体にまたがるか、現在定義されている領域にそれぞれ配置する必要があります。したがって、スタイルを設定したい特定のセレクターは、「。full-width-content.hfeed」と「.content-sidebar.hfeed」になります。別のコンテナを含めるように設定しようとしましたが、機能しません。

おそらく、このセクションを定義されたグリッドから切り離して、クラスで選択してから、メディアクエリを実行する必要がありますか？

スージーでこれを達成するための最良の方法は何ですか？

//susy grid definitions, footer sits outside the susy grid def

#wrap {
    @include container( $total-columns, $break-tablet, $break-desktop );

    @include at-breakpoint( $break-tablet ) {
        #header     { @include span-columns( $break-tablet omega ); }
        #title-area { @include span-columns( 5, $break-tablet ); }
        #header .widget-area { @include span-columns( 4 omega, $break-tablet ); }
        #nav        { @include span-columns( $break-tablet omega ); }
        .hfeed      { @include span-columns( 6, $break-tablet ); }
        #sidebar    { @include span-columns( 3 omega, $break-tablet ); }
    }

    @include at-breakpoint( $break-desktop ) {
        #header     { @include span-columns( $break-desktop omega ); }
        #title-area { @include span-columns( 5, $break-desktop ); }
        #header .widget-area { @include span-columns( 5 omega, $break-desktop ); }
        #nav        { @include span-columns( $break-desktop omega ); }
        .hfeed      { @include span-columns( 7, $break-desktop ); }
        #sidebar    { @include span-columns( 4 omega, $break-desktop ); }
    }
}
4

1 に答える 1

1

私にとって、これは CSS 固有性の順序の問題です。WordPress での悲しい経験から、Twenty-Eleven のようなものから子テーマを作成している場合、これにかなり苦労することを知っています。したがって、変更を加えようとしてもうまくいかない場合は、要素を調べて、ルールが適用されているか、他のスタイルによって上書きされていないかを確認してください。私たちのWordPressのテーマにはこの問題がたくさんあることをすでに理解していると思います.

CSS 構造のセットアップ方法に応じて、次のようになります。

• モバイル ファースト - 最小画面から最大画面へ • 大きな画面から小さな画面へ

コードは次のようになります。

css の上部にある大画面または小画面のデフォルト スタイル - 最初に処理 > 次に > 画面サイズが変更されたときにこれらのディレクティブをオーバーライドするためのメディア クエリ > それが発生したときに変更されるものはすべてここに入ります。

/* デフォルトのスタイル */ body {...}

/* スマートフォンのスタイル */

@メディアクエリ {

body.class.container { ... }

}

これが役立つかどうかはわかりませんが、方向性を示す手助けをしようとしています。これについて他の人が何を言っているのか興味があります。

ところで、WordPress テーマと SASS を使用する際に心に留めておくべきことは、CSS の特異性のコストを確実に理解することです。具体的に行けば行くほど、ページの生成にかかる時間が長くなります。SASS を使用して詳細を取得するのは非常に簡単です。

幸運であれ友よ。これが役に立たない場合は申し訳ありません。

于 2012-12-04T17:45:52.213 に答える