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

Question

我有2个mediaqueries:

@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说的，你应该用"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>