より低い最小幅のメディア クエリがより高い最小幅のメディア クエリをオーバーライドするのはなぜですか?

CSS の特異性、メディア クエリ、最小幅: 優先順位を理解する

レスポンシブなアプローチで Web サイトを再設計する場合、特異性を維持し、最小幅でのメディア クエリの動作を理解する-幅は重要です。ただし、CSS 値を上書きしようとすると、より低い 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; }
}

解像度 600px 以上の場合、

の font-size が期待されます。要素は 2.2em である必要があります。ただし、出力には代わりに 1.7em が表示されます。開発者ツールには 2.2em 宣言が表示されますが、最小幅の低いクエリの 1.7em 設定によって上書きされます。

メディア クエリの優先順位について

この動作は、メディア クエリの評価方法が原因です。複数のメディア クエリが 1 つの要素に適用される場合、カスケード順序で最後に発生するルールが優先されます。この場合、600 ピクセル以上の解像度では両方のメディア クエリが true と評価されるため、後者のクエリが前者のクエリをオーバーライドします。

問題の解決

これを解決するには、ルールが意図した順序でカスケードされるようにメディア クエリ ブロックを再配置します。

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

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

最初に最小幅の低いクエリを実行すると、2.2em フォント サイズが 600 ピクセル以上の解像度で有効になります。

結論

CSS の特異性とカスケード順序について効果的なレスポンシブ デザインには、メディア クエリの削減が不可欠です。メディア クエリの順序を慎重に検討することで、コードが意図したとおりに動作し、さまざまな画面サイズで望ましいビジュアル出力を実現できるようになります。

以上がより低い最小幅のメディア クエリがより高い最小幅のメディア クエリをオーバーライドするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。