Question

我想要一些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和桌面？

Answer 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 */
}

希望这对你有所帮助！如果您对此有疑问或需要澄清，请与我们联系。

Answer 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){

}

Answer 3

您需要在HTML中使用此功能，然后您的媒体查询才能同时适用于这两者。

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

适用于iPad和桌面的媒体查询（最大宽度）

3 个答案: