CSS 媒体查询 - 更仔细地定位平板电脑

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) { ... }

试试这个。

CSS 媒体查询 - 更仔细地定位平板电脑

CSS Media Query - target tablets more carefully

html

css

orientation

media-queries