我想要一些 CSS 代码以最大宽度：768 为目标 iPad 和桌面。
这（我不知道为什么，很高兴知道）不适用于 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 和桌面？
您可以使用逗号在 @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 */
}
希望这对你有帮助！如果您对此有任何疑问或需要澄清，请告诉我。
我用过这个。在所有设备上为我工作。
@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">