web-dev-qa-db-ja.com

CSSでメディアクエリの順序が重要なのはなぜですか？

最近、私はより応答性の高いサイトを設計しており、CSSメディアクエリを頻繁に使用しています。私が気づいたパターンの1つは、メディアクエリが定義される順序が実際に重要であることです。すべてのブラウザでテストしたのではなく、Chromeでのみテストしました。この動作の説明はありますか？サイトが期待どおりに機能しない場合にイライラすることがあり、クエリなのか、クエリが記述されているのかわからないことがあります。

以下に例を示します。

[〜＃〜] html [〜＃〜]

<body>
    <div class="one"><h1>Welcome to my website</h1></div>
    <div class="two"><a href="#">Contact us</a></div>
</body>

CSS：

body{
font-size:1em; /* 16px */
}

.two{margin-top:2em;}



/* Media Queries */

@media (max-width: 480px) {
    .body{font-size: 0.938em;}

}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
       .two{margin-top:8em;}
            }
/*1024x600*/
@media (max-height: 600px) {
       .two{margin-top:4em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
       .two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
       .two{margin-top:7em;}
}

ただし、最後に1024x600のクエリを記述した場合、ブラウザはそれを無視し、CSSの開始で指定されたマージン値（margin-top：2em）を適用します。

/* Media Queries - Re-arranged version */

@media (max-width: 480px) {
    .body{font-size: 0.938em;}
}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
       .two{margin-top:8em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
       .two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
       .two{margin-top:7em;}
}
 /*1024x600*/
@media (max-height: 600px) {
       .two{margin-top:4em;}
}

メディアクエリの私の理解が正しい場合、順序は重要ではありませんが、それは正しいようです。その理由は何でしょうか？

csscss3media-queriesresponsive-design
67
dsignr

これはCSSの設計によるもので、カスケードスタイルシートです。

つまり、同じ要素に衝突する2つのルールを適用する場合、最初のルールに!importantマーカーがあるか、より具体的でない限り（たとえば、html > body vsただbody、後者はより具体的ではありません）。

したがって、このCSSを考えると

@media (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

ブラウザウィンドウの幅が350ピクセルの場合、背景は青になりますが、このCSS

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

同じウィンドウ幅の場合、背景は赤になります。両方のルールは実際に一致しますが、2番目のルールは最後のルールであるために適用されます。

最後に、

@media (max-width: 400px) {
  body {
    background: blue !important;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

または

@media (max-width: 400px) {
  html > body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

背景は青になります（幅が350ピクセルのウィンドウ）。

118
Alessandro Vendruscolo

または、大きなメディアクエリに最小幅を追加するだけで、順序に関係なく問題は発生しません。

@media (min-width: 400.1px) and (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

このコードを任意の順序で使用すると、400.1px-600pxの幅の解像度では背景色は常に赤になり、400px以下の幅の解像度では常に青になります。

18
Liran H