min-width でメディア クエリを使用するときに CSS 特異性の競合を回避するにはどうすればよいですか?

CSS の特異性とメディア クエリ: min-width で優先順位の難問を克服する

レスポンシブな Web サイトを設計する場合、CSS の特異性とメディアの相互作用を理解するクエリは非常に重要です。スタイルのレプリケーションを回避するために min-width に依存する場合に発生する一般的な問題の 1 つは、より低い min-width 値がより高い min-width 値をオーバーライドする可能性があることです。

次のコードを考えてみましょう。

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

直感的には、 2.2em フォント サイズは 600 ピクセルを超える解像度に適用されることが予想されます。ただし、ご覧のとおり、最小幅 320 ピクセルのメディア クエリで定義された 1.7em フォント設定は、2.2em 設定をオーバーライドします。

これは、600 ピクセルを超える解像度では両方のメディア クエリが true と評価されるために発生します。このような場合、CSS カスケードで最後に宣言されたルール (つまり、1.7em 設定) が優先されます。

優先順位の問題の克服

この優先順位の問題を解決するには、プライマリが 2 つありますオプション:

1. メディア クエリの並べ替え: 最小幅の大きいクエリが最後になるようにメディア クエリの順序を切り替えます。これにより、2.2em フォント サイズが 600 ピクセルを超える解像度に正しく適用されるようになります。
2. 詳細度の使用: セレクターを追加して、2.2em ルールの詳細度を高めます。たとえば、要素セレクター h2.main を使用して、最小幅 320 ピクセルのクエリで定義された汎用の h2 ルールをオーバーライドできます。最初のオプションは、CSS 構造の明瞭さを維持し、詳細性の調整の必要性を避けるため、一般的に推奨されます。メディア クエリを次のように再配置することで、目的の動作を確実に実現できます:

以上がmin-width でメディア クエリを使用するときに CSS 特異性の競合を回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。