css - iPad 和桌面的媒体查询(最大宽度)

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

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