複数の CSS メディア クエリが重複するとどうなりますか?

メディア クエリの重複: カスケードが至高に君臨

複数のメディア クエリが同じビューポート サイズに一致するとどうなりますか?答えは、CSS の中核原則であるカスケードと重複のルールにあります。

動作中のカスケード

@media ルールは、通常の CSS ルールと同様にカスケードに従います。複数の @media ルールが一致する場合、一致するすべてのスタイルが適用され、カスケードによって競合が解決されます。言い換えれば、最後に宣言された最も具体的なスタイル ルールが優先されます。

ブレークポイントでのオーバーラップ

ちょうど 20 時と 45 時、最初と 2 番目のメディア クエリ、および2 番目と 3 番目のメディア クエリがそれぞれ一致します。ブラウザは両方のルールのスタイルを適用し、それに応じてカスケードします。競合する宣言がある場合は、最後に宣言されたルールが優先されます。

内訳例

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

@media (max-width: 20em) {
    .sidebar { display: none; }
}

@media (min-width: 20em) and (max-width: 45em) {
    .sidebar { display: block; float: left; }
}

At 20emワイドの場合、両方のメディア クエリが一致します。カスケード オーバーライドは、display: block および float: left による display: none を .sidebar クラスの要素に適用します。

相互排他による重複の回避

重複を防ぐには、メディア クエリが相互に排他的であることを確認してください。 min- と max- は包括性を表すことに注意してください。 (min-width: 20em) と (max-width: 20em) はどちらも 20em 幅のビューポートに一致します。

小数ピクセル値

CSS のピクセル値は論理ピクセルです。ビューポート幅の小数ピクセル値を報告するブラウザを見つけることができませんでした。 iOS の Safari は、ビューポートが 799.5 ピクセルであっても、(max-width: 799px) または (min-width: 800px) が少なくとも 1 つのルールに一致するように小数値を四捨五入します。

以上が複数の CSS メディア クエリが重複するとどうなりますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。