适用于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 */
}

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

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

}