媒体iPhone 4S的的查询，取为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以纵向方式向浏览器报告的宽度为375px。这意味着，您的第一个颜色规则会被第二个颜色规则覆盖，因为浏览器的报告解析通过了该媒体查询。 （它在320px和480px之间。）

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