最小幅のメディア クエリを正しくカスケードするにはどうすればよいですか?

最小幅メディア クエリを使用したカスケード CSS の特異性

Web サイトをデザインするときは、次のようなレスポンシブ Web デザイン原則を使用するのが一般的です。モバイルファーストのアプローチ。これには、特定の画面サイズのデバイスをターゲットとする min-width メディア クエリを使用する必要があります。ただし、より高い画面解像度に合わせて 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 以上の場合、両方のメディア クエリが true になります。ただし、2 番目のルールはカスケードの後半で発生するため、優先され、小さい 1.7em フォント サイズが適用されます。

解像度

上位の宣言を効果的に上書きするにはより強力なセレクターや最大幅に頼らずに最小幅を使用して解像度を設定すると、メディアの順序を切り替えることができますクエリ:

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

これにより、画面幅が少なくとも 600 ピクセルの場合に、より大きなフォント サイズが適用されるようになります。これにより、期待どおりのカスケード特異性が得られ、より高い min-width が優先されます。

以上が最小幅のメディア クエリを正しくカスケードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。