iPad 和桌面的媒体查询（最大宽度）答案

【问题标题】：Media Query for iPad and desktop (max-width)iPad 和桌面的媒体查询（最大宽度）
【发布时间】：2016-01-29 17:04:46
【问题描述】：

我想要一些 CSS 代码同时针对 iPad 和桌面，最大宽度为：768。

这（我不知道为什么，很高兴知道）不适用于 iPad（仅限桌面）：

@media only screen and (max-width: 768px)

所以我不得不为 iPad 做这个：

@media only screen and (device-width: 768px)

但是，我在两个媒体查询中都有完全相同的代码，我无法接受。

我也试过这个：

@media only screen and (max-width: 767px) or (device-width: 768px)

上面的这个也不起作用 - 它实际上适用于桌面，无论宽度如何，而不是在 iPad 上。真奇怪。

如何使用相同的媒体查询同时定位 iPad 和桌面？

【问题讨论】：

现在你上面的代码没有显示它，但我假设你在这个@媒体之后和你的css周围添加了正确的括号：{}？ - 如在@media only screen and (max-width:767px) { .example{width:100px;} }
在我看来，唯一的解决方案是使用所有这些代码作为默认 CSS，并将所有“反对”它的 CSS 放在媒体查询中 (min-width: 769px)以桌面为目标。我之前没有想到这一点，因为我一直在考虑将桌面宽屏作为默认布局。你们觉得呢？

标签： css ipad media

【解决方案1】：

您可以使用逗号在@media 查询中包含两个不同的规则。当规则相同时，这将避免两个设备的冗余 CSS：

@media only screen and (device-width: 768px),
       only screen and (max-width: 768px) {
/* CSS */
}

以下代码专门用于 iPad（纵向和横向）：

/* iPad Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* CSS */
}

/* iPad Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
/* CSS */
}

希望对您有所帮助！如果您对此有任何疑问或需要澄清，请告诉我。

【讨论】：

【解决方案2】：

我用过这个。在所有设备上为我工作。

@media only screen and (min-width: 1024px) and (max-width: 1199px){

}

@media only screen and (min-width: 768px) and (max-width: 1023px){

}

@media only screen and (min-width: 480px) and (max-width: 767px){

}

@media only screen and (min-width: 0px) and (max-width: 479px){

}

【讨论】：

【解决方案3】：

您需要在您的 HTML 中使用它，然后您的媒体查询将适用于两者。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

【讨论】：