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

我想要一些CSS代码，以最大宽度768的iPad和桌面为目标。

这（我不知道为什么，很高兴知道）不适用于iPad（仅适用于台式机）：

因此，我不得不在iPad上这样做：

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

然而，我在两个媒体查询中有完全相同的代码，我不能接受

我也试过：

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

上面这一个也不起作用——它实际上适用于桌面，不管什么宽度，而不是iPad。真奇怪

---

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

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

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

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

---

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

我已经使用了此功能。在所有设备中为我工作

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

}

---

你需要在你的HTML中使用它，然后你的媒体查询将对这两个方面都起作用

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

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

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

}

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