web-dev-qa-db-ja.com

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の画面幅はどうですか？ （明らかに通常のディスプレイではなく、網膜ディスプレイ上ですか？）


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

csscss3responsive-designmedia-queries
75
Baumr

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はクラス.sidebarを持つすべての要素に適用されます。

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

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

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

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

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

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

min-およびmax-プレフィックスは、「最小包括的」および「最大包括的」を意味することに注意してください。これは、(min-width: 20em)と(max-width: 20em)の両方が正確に20em幅のビューポートに一致することを意味します。

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

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

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

私の実験から、iOSのSafariはすべての小数ピクセル値を丸めて、max-width: 799pxとmin-width: 800pxのいずれかが一致するようにします。

1Conditional Rules module または Cascade module （後者は現在書き換えが予定されています）のいずれにも明示的に記載されていませんが、カスケードは仕様では、ブラウザまたはメディアに一致するすべての@mediaルールにスタイルを適用するように単純に指示されているため、通常どおり配置します。

93
BoltClock

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

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

ubuntuデスクトップまたはChrome電話のどちらでもAndroidで動作しないため、これは良いアイデアではないことがわかりました。 （ここで説明されているように： calc（）はメディアクエリ内で機能しません ）しかし、私はより良い方法を見つけました...

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

そしてバム！

3
Pierre-Verthume Larivière

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

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

情報：

emユニットを使用しないと、クエリのスタックに役立ちます。

3
Milche Patern