メディア クエリで「min-width」を使用するときに CSS ルールが正しく適用されることを確認するにはどうすればよいですか?

CSS の特異性、メディア クエリ、最小幅について理解する

「モバイル ファースト」アプローチを使用してレスポンシブ Web デザインを実装する場合、最小幅はwidth を使用すると、デザイナーはデバイスの幅に基づいて CSS ルールを定義できます。ただし、CSS 値を上書きする場合、最小幅の小さい方が優先される可能性があるため、問題が発生します。

問題

例で問題を示します。

@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 を超える解像度では、h2 フォント サイズが 2.2em で表示されるはずです。ただし、1.7em 宣言が優先されます。

解決策

メディア クエリは詳細度の階層で動作し、最も詳細度の高いルールが詳細度の低いルールをオーバーライドします。上の例では、最初のメディア クエリは、より高い最小幅を指定しているため、より具体的になっています。

正しいアプローチは、フォント サイズを 2.2em に設定する、より具体的なルールが適用されるようにメディア クエリを並べ替えることです。 、最後に表示されます:

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

これにより、min-width が低い場合でも、600 ピクセルを超える解像度に必要な CSS ルールが確実に有効になります。値。

以上がメディア クエリで「min-width」を使用するときに CSS ルールが正しく適用されることを確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。