101

重複を避けるためにメディア クエリを正確に配置するにはどうすればよいでしょうか?

たとえば、次のコードを考えてみます。

@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.5 px の画面幅はどうでしょうか? （明らかに通常のディスプレイではなく、Retina ディスプレイですか？）


仕様を考慮して、ここでの答えに最も興味があります。

4

3 に答える 3

120

CSS メディアクエリのオーバーラップのルールは何ですか?

カスケード。

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

サポートしているすべてのブラウザーで、正確に 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れ、 class を持つすべての要素に適用されます.sidebar。

メディア クエリが最初から存在しないかのようにルールを適用すると考えることができます。

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

ブラウザが 2 つ以上のメディア クエリに一致するときにカスケードが発生する方法の別の例は、この他の回答にあります。

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

重複を避けるためにメディア クエリを正確に配置するにはどうすればよいでしょうか?

重複を避けたい場合は、相互に排他的なメディア クエリを作成する必要があります。

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

あなたはすでに例を持っているようです。それがあなたの最後の質問につながります。

799px に続いて 800px を使用している人を見てきましたが、799.5 px の画面幅はどうでしょうか? （明らかに通常のディスプレイではなく、Retina ディスプレイですか？）

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

私の実験では、ビューポートが実際には 799.5px (明らかに前者と一致する) であっても、iOS 上の Safari はすべての小数ピクセル値を四捨五入して、 と のいずれかmax-width: 799pxが一致するように見えます。min-width: 800px

1 条件付きルール モジュールまたはカスケード モジュール(後者は現在書き直しが予定されている)のいずれにも明示的に記述されていませんが、カスケードは正常に行われることが暗示されています。ブラウザまたはメディアに一致するすべてのルール。@media

于 2012-11-28T18:01:35.093 に答える
2

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

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

情報:

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

于 2012-12-12T19:12:36.713 に答える