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

Question 1

最近、私はより応答性の高いサイトを設計しており、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;}
}

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

Question 2

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

あなたは2つのルールを適用する場合には、最初のものは持っていない限り、同じ要素に衝突するが、それは、宣言された最後のいずれかを選択すること、それを意味し!important、より具体的にマーカーをかである（例えばhtml > body、単に対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ピクセル幅のウィンドウ）。

Question 3

または、より大きなメディアクエリに最小幅を追加するだけで、順序に関係なく問題が発生しないようにすることもできます。

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

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

スニペットを展開

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