iPhone 6 上的错误媒体查询触发器

Question

我有 2 个媒体查询：

@media only screen and (max-width: 550px), (max-height: 550px) and (min-device-width: 500px)

和

@media only screen and (max-width: 550px), (max-height: 550px) and (min-device-width: 800px)

为什么最后一个会覆盖第一个？ iphone6竖屏的最小设备宽度不是800px吧？

我也试过用 min-width 代替 min-device-width

Answer 1

逗号是一个 OR 参数。这意味着在这种情况下，只要 max-width: 550px 为真，设备就不会关心以下参数。

删除逗号并用 and 替换它们应该可以解决问题。

Answer 2

正如 KittMedia 所说，您应该用 "and" 替换逗号，以便执行两个语句。

示例：

@media only screen and (max-width: 550px) and (max-height: 550px) and (min-device-width: 800px) {
     p {display: none}
}

<p>This will disappear on an iPhone 6</p>

iPhone 6 上的错误媒体查询触发器

Wrong media-query triggers on iPhone 6

css

iphone

media-queries