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)

为什么最后一个会覆盖第一个？ iphone 6的纵向最小设备宽度不是800px，对吗？

我也尝试过min-width而不是min-device-width

Answer 1

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

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

Answer 2

就像KittMedia所说的那样，你应该用＆＃34;和＆＃34;替换逗号。这样两个语句都被执行了。

示例：

@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上的错误媒体查询触发器

2 个答案: