媒體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之間。）

由於您的媒體查詢重疊，最後一個將用於通過兩個媒體查詢的瀏覽器。