Question

我为iPhone 4/4S，iPhone 5/5S，iPhone 6和iPhone 6Plus撰写了媒体查询。这是代码：

/*For iPhone 4/4S*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation: portrait){ /*my styles here */ }
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation: landscape){ /*my styles here */ }  

/*For iPhone 6*/
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) {  /*my styles here */ }
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {  /*my styles here */ }

/*For iPhone 6plus*/
@media only screen and (min-device-width : 414px) and (max-device-width : 
736px) and (orientation : portrait) { /*my styles here */ }
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) { /*my styles here */ }

对于portrait mode，每个设备的人像css都已成功应用。但对于landscape mode所有设备，只有iPhone 6Plus的横向媒体查询才会被应用我该如何解决？

Answer 1

如果您想要应用一组样式，如果查看设备的最小宽度为700px，或者是横向的手持设备，您可以编写以下内容：

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

上面，如果我在视口宽度为800px的屏幕设备上，则媒体语句将返回true，因为第一部分被解释为@media all和（min-width：700px）将应用于我的设备，因此尽管我的屏幕设备在第二个媒体查询中检查手持媒体类型失败，但返回true。同样，如果我使用视口宽度为500px的横向视频手持设备，而第一个媒体查询因视口宽度而失败，则第二个媒体查询将成功，因此媒体语句将返回true。

以逗号分隔的列表

逗号分隔列表的行为类似于逻辑运算符或在使用时   媒体查询。使用以逗号分隔的媒体查询列表时，如果   任何媒体查询都返回true，样式或样式表都会返回   应用。逗号分隔列表中的每个媒体查询都被视为   单个查询，以及应用于一个媒体查询的任何运算符都不会   影响他人。这意味着以逗号分隔的媒体查询可以   定位不同的媒体功能，类型和状态。

reference

媒体查询不适用于iPhone系列

1 个答案: