CSS Media Query - 更仔细地定位平板电脑

Question

我一直在使用媒体查询来定位平板电脑，只需写下来：

@media only screen and (max-width: 1199px) { ... }

然而，本周末我遇到了一款平板电脑，其分辨率甚至超过了平板电脑，触发了一个不应该看到的菜单。通常，我不在乎，因为我使用这些查询来触发通常在该分辨率下看起来很好的设计更改，但在这种特殊情况下，它并不好，因为基于悬停的菜单显示在平板电脑上显然很难使用。

所以我一直在修补一下在最大宽度或两个方向上触发的媒体查询，如下所示：

@media handheld, (max-device-width: 1300px), (orientation: landscape), (orientation: portrait)  { ... }

但是，这似乎也会在我的电脑上触发，我不明白为什么。任何人都知道为什么，或者对我的问题有更好的解决方案？

Answer 1

这是因为你在媒体查询条件中使用,而不是and。

例如：

@media handheld and (max-device-width: 1300px) and (orientation : landscape) {
   .div {....}
} 

@media screen (max-width: 449px), handheld and (orientation:landscape) { ... }

试试这个吧。