css - 试图理解媒体查询

Question

我在我的 CSS 中设置了以下 3 个媒体查询

@media only screen and (min-device-width : 375px) and (max-device-width : 667px){
    #main-container{
        width: 375px;
        height: 667px;
    }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 568px){
    #main-container{
        width: 320px;
        height: 568px;
    }
}


@media only screen and (min-device-width : 320px) and (max-device-width : 480px){
    #main-container{
        width: 320px;
        height: 480px;
    }
}

当我检查我的页面以寻找合适的屏幕时，最后的媒体查询总是覆盖尺寸。我不确定为什么会发生这种情况，即使在为该屏幕指定了正确的最大和最小宽度之后也是如此

第一个媒体查询针对 Iphone 6，第二个针对 Iphone 5，第三个针对 Iphone 4

Answer 1

最后一个是覆盖其他的，因为 iPhone4 尺寸在 320px 和 480px 之间。具体来说，iPhone4宽度为320px，满足最后的媒体查询。

因此您需要重新考虑您的策略以解决这个问题。