与iPhone媒体查询冲突。"X“媒体查询覆盖"Y”

Question

"X“媒体查询覆盖"Y”，例如。

  /* ----------- iPhone 4 and 4S ----------- */
    @media (min-width: 320px) and (max-width: 480px){ 
    header{ height:480px; width: 100%; background-color: blue; } 
    h1:before {content: "iPhone 4";}
    }
    /* ----------- iPhone 5 and 5S ----------- */
    @media (min-width: 320px) and (max-width: 568px){
    header{ height:599px; width: 100%; background-color: blue; } 
    h1:before {content: "iPhone 5";}
    }

我尝试添加设备纵横比来解决这个问题，但没有起作用。

有人知道答案了吗？

未来如何在新设备上避免这种情况？

Answer 1

第一个查询询问窗口宽度(实时)是否在320-480之间。所以，如果我用一个实时窗口宽度为400px的设备加载你的页面--查询变成真的，那么相应的css就会被应用。

然而，如果在第二次查询中使用相同的设备-该查询也将为真，因为400-宽度的设备也适合320-568跨度。

我不知道你想要完成什么场景，但一种方法是不要试图针对单个设备。示例:您可以为跨度设置唯一的css ...301-350,351-400,401-450...(等等)。这样，单个宽度仅适用于一个跨度。此外，进入市场的新设备将自动“挑选”其中一个跨度。