iphone 4的媒体查询是针对Iphone 6的

Question

我有这个简单的css块：

    @media only screen
    and (min-device-width: 375px)
    and (max-device-width: 667px)
    and (-webkit-min-device-pixel-ratio: 2) {  // iphone 6
      color: red;
    }
    @media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) {  //iphone 4S
      color: blue;
    }

在iphone 6上运行时，颜色为...蓝色 （我没有其他地方可以定义颜色属性）。

为什么？

Answer 1

iPhone 6纵向向浏览器报告的宽度为375像素。这意味着，您的第一个颜色规则被第二个颜色规则覆盖，因为浏览器报告的分辨率通过了该媒体查询。 （介于320px和480px之间。）

由于您的媒体查询重叠，最后一个将用于传递两个媒体查询的浏览器。