媒体查询问题订单错误？

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) {}

然后两个背景都是红色的，但我把第二个背景放在紫色上。我指的是我自己的网站www.gester.nl。有人可以帮助我，并使用媒体查询代码进入网站，为什么有些媒体查询不能正常工作。是我使用了错误的订单还是什么？我只是使用谷歌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
}