メディア クエリで小さい 'min-width' が大きい 'min-width' をオーバーライドするのはなぜですか?

特異性、メディア クエリ、min-width について

レスポンシブ Web デザインでは、min-width は要素のスタイル設定に不可欠なツールです。特定の画面サイズ。ただし、カスケード スタイルシート (CSS) は特異性によって競合を解決するため、メディア クエリとのこの相互作用が予期しない結果を引き起こす可能性があります。

小さい最小幅が大きい最小幅をオーバーライドする問題に遭遇したとき、あなたは疑問に思ったかもしれません。なぜ。この動作は、CSS カスケードの優先順位に起因する可能性があります。 min-width などのメディア クエリはセレクターであり、適用するスタイルからその特異性を継承します。

この場合、@media のみの画面と (min-width: 320px) は @media のみの画面よりも具体的です。 (min-width: 600px) より正確な条件があるためです。したがって、600 ピクセルが両方のメディア クエリの条件を満たしている場合でも、320 ピクセル幅のメディア クエリに設定されている 1.7em フォント サイズが優先されます。

この問題を解決するには、メディア クエリを再配置して、正しい順序になるようにします。 precedence:

@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; }
}

現在、画面サイズが 600px 以上の場合、 h2 の 2.2em フォント サイズが有効になります。スタイルの特異性が目的の解像度と一致していることを確認することで、より強力なセレクターや max-width に依存せずに、引き続き min-width を使用して宣言を高解像度で上書きできます。

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