メディアクエリの問題の順序が間違っていますか？

Question

私は16のメディアクエリーか何かを持っていて、私はすべてのメディアクエリーのポートレートを1つの異なる色に置くと、別のメディアクエリーの下に落ちていることに気付きました。

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}

を、私はインスタンスを持っている：例えば私が持っている

@media only screen and (min-device-width: 320px) and 
(max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) 
and (orientation: portrait) {} 

その後、両方の背景が赤のですが、私は紫の上の第2の背景を置きます。私は自分自身のウェブサイトwww.gester.nlを参照しています。誰かが私を助け、メディアクエリーコードでウェブサイトを見て、なぜ動作すると思われるメディアクエリーが動作しないのか間違った注文や何かを使っているのですか？私はちょうどそれが他のデバイスでどのように見えるかを見るためにGoogleのf12を使用します。

Answer 1

あなたのメディアクエリは重複しています。あなたは、特定の画面サイズを対象とするには、以下のようなものを使用したいと思うでしょう：

@media only screen and (min-width: 320px) and (max-width: 480px) { 
    // do stuff between 320px and 480px 
} 

@media only screen and (min-width: 481px) and (max-width: 568px) { 
    // do stuff between 481px and 568px 
}