CSS媒体查询未正确分组条件

Question

我有以下css：

    /* iPhone 4 Landscape */
@media only screen 
    and (max-device-width: 480px) 
    and (min-device-width: 320px) 
    and (orientation: landscape) {

    .dropdown-menu{
        height: 210px;  
    }
}

/* iPhone 4 Portrait */
@media only screen  
    and (max-device-width: 480px)
    and (min-device-width: 320px)
    and (orientation: portrait) {

    .dropdown-menu{
        height: 370px;  
    }
}


/* iPhone 5 Landscape */
@media only screen      
    and (max-device-width: 568px)
    and (min-device-width: 320px) 
    and (orientation: landscape) {

    .dropdown-menu{
        height: 210px;  
    }
}

我的问题是iPhone 5的状况似乎对iPhone 4有影响。我知道它有效地做了同样的事情（将高度设置为210px）但是有理由这样做吗？我正在使用chrome的手机模拟器进行测试。

似乎只看到min-device-width的一个条件是320px并使用该查询而不是同时使用所有条件。

Answer 1

这是因为iphone 4屏幕将满足两个媒体查询（分辨率低于最大iphone 5媒体查询），而iphone 5是最后一个。作为最后一个它覆盖了iphone 4媒体查询。