媒体查询是否需要满足所有条件才能工作？

Question

我正在尝试为 iphone 5 设置媒体查询，为 iphone 6 设置不同的媒体查询。但是由于某种原因，我的查询似乎重叠：

iPhone 6

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

iPhone 5

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

由于某种原因，我在 iPhone 5 的媒体查询中声明的内容也显示在 iPhone 6 上。查询是否重叠？我认为这两个条件都必须满足。

我正在使用来自 xcode 的最新 iphone 模拟器。

Answer 1

我不确定为什么查询会重叠，但您可以尝试使用device-aspect-ratio 媒体查询，正如question 所建议的那样：

iPhone5： @media screen and (device-aspect-ratio: 40/71) {}

iPhone6： @media screen and (device-aspect-ratio: 667/375) {}

在做了一些研究之后，我实际上也可以回答你原来的问题。 是的，媒体查询需要满足所有条件才能匹配。但是当您在纵向模式下使用这两种设备时，iPhone6 的设备宽度为 375 像素，而 iPhone5 的设备宽度为 320 像素之一。然而，375px 的设备宽度介于 320px 和 568px 之间，因此也符合 iPhone5 的规则。如果规则相互覆盖，它可以工作，如果你只是切换媒体查询的顺序，因为 iPhone6 规则不会显示在 iPhone5 上，但如果你想明确区分两部手机，你应该使用@987654325 @。