CSSメディアクエリの重複のルールは何ですか？

重複を避けるために、メディアクエリの間隔を正確に設定するにはどうすればよいですか？

たとえば、コードを検討すると、次のようになります。

@media (max-width: 20em) {
    /* for narrow viewport */
}

@media (min-width: 20em) and (max-width: 45em) {
    /* slightly wider viewport */
}

@media (min-width: 45em) {
    /* everything else */
}

サポートされているすべてのブラウザーで、正確に20emと45emで何が起こりますか？

私は人々が使用するのを見てきました：799px、次に800pxのようなものですが、799.5pxの画面幅はどうですか？（明らかに、通常のディスプレイではなく、網膜のディスプレイですか？）

スペックを考えれば、ここでの答えが一番気になります。

CSSメディアクエリの重複のルールは何ですか？

カスケード。

@mediaルールはカスケードに対して透過的であるため、2つ以上の@mediaルールが同時に一致する場合、ブラウザーは一致するすべてのルールにスタイルを適用し、それに応じてカスケードを解決する必要があります。¹

サポートされているすべてのブラウザーで、正確に20emと45emで何が起こりますか？

ちょうど20emの幅で、最初と2番目のメディアクエリは両方とも一致します。ブラウザは両方の@mediaルールにスタイルを適用し、それに応じてカスケードします。したがって、オーバーライドする必要のある競合するルールがある場合は、最後に宣言されたルールが優先されます（特定のセレクター!importantなどを考慮）。同様に、ビューポートの幅が正確に45emの場合の2番目と3番目のメディアクエリの場合。

いくつかの実際のスタイルルールが追加されたサンプルコードを検討します。

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

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

ブラウザのビューポートの幅が正確に20emの場合、これらのメディアクエリは両方ともtrueを返します。カスケードすることにより、display: block上書きされますdisplay: noneとfloat: leftクラスとの任意の要素に適用されます.sidebar。

メディアクエリがそもそもそこになかったかのようにルールを適用することと考えることができます。

.sidebar { display: none; }
.sidebar { display: block; float: left; }

ブラウザが2つ以上のメディアクエリに一致するときにカスケードがどのように行われるかの別の例は、この別の回答にあります。

ただし、両方のルールで重複しない宣言がある場合@mediaは、それらのルールがすべて適用されることに注意してください。ここで起こることは、後者が前者を完全に覆すだけでなく、両方の規則の宣言の結合@mediaです...これはあなたの以前の質問に私たちをもたらします：

重複を避けるために、メディアクエリの間隔を正確に設定するにはどうすればよいですか？

重複を避けたい場合は、相互に排他的なメディアクエリを作成するだけです。

接頭辞min-とmax-接頭辞は「最小包括的」と「最大包括的」を意味することに注意してください。これは(min-width: 20em)、(max-width: 20em)正確に20em幅のビューポートと一致することを意味します。

あなたはすでに例を持っているようです、それはあなたの最後の質問に私たちをもたらします：

私は人々が使用するのを見てきました：799px、次に800pxのようなものですが、799.5pxの画面幅はどうですか？（明らかに、通常のディスプレイではなく、網膜のディスプレイですか？）

これは完全にはわかりません。CSSのすべてのピクセル値は論理ピクセルであり、ビューポート幅の小数ピクセル値を報告するブラウザーを見つけるのに苦労しました。いくつかのiframeを試してみましたが、何も思いつきませんでした。

私の実験から、iOS上のSafariは、ビューポートが実際に799.5px（明らかに前者と一致する）であっても、max-width: 799pxとのいずれかmin-width: 800pxが一致することを保証するためにすべての小数ピクセル値を丸めているように見えます。

¹ _{これは、条件付きルールモジュールまたはカスケードモジュール（後者は現在書き換えが予定されています）のいずれにも明示的に記載されていませんが、仕様ではスタイルを適用するように指示されているだけなので、カスケードは正常に行われることを意味します@mediaブラウザまたはメディアに一致するすべてのルール。}

私はここで推奨されているように試しました：

@media screen and (max-width: calc(48em - 1px)) {
    /*mobile styles*/
}
@media screen and (min-width: 48em) {
    /*desktop styles*/
}

しかし、UbuntuデスクトップでもAndroidスマートフォンでも、現在Chromeでは機能しないため、これは良い考えではないことがわかりました。（ここで説明されているように：calc（）はメディアクエリ内で機能しません）しかし、私はより良い方法を見つけました...

@media screen and (max-width: 47.9999em) {
    /*mobile styles*/
}
@media screen and (min-width: 48em) {
    /*desktop styles*/
}

とバム！

calc()これ(min-width: 50em and max-width: calc(50em - 1px)を回避するために使用できますが、正しくスタックされます）が、ブラウザのサポートが不十分であり、お勧めしません。

@media (min-width: 20em) and (max-width: calc(45em - 1px)) {
    /* slightly wider viewport */
}

情報：

• https://developer.mozilla.org/en-US/docs/CSS/calc
• http://caniuse.com/calc
• http://www.w3.org/TR/css3-values/#calc

他の何人かは、emユニットを使用しないとクエリのスタックに役立つと述べました。