CSS 适用于 iPad 和桌面的媒体查询（最大宽度）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13076371/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Media Query for iPad and desktop (max-width)
提问by zok
I want some CSS code to target both iPad and desktop with max-width: 768.
我想要一些 CSS 代码以 max-width: 768 来定位 iPad 和桌面。
This (I don't know why, would be glad to know) doesn't work for the iPad (only desktop):
这（我不知道为什么，很高兴知道）不适用于 iPad（仅限台式机）：
@media only screen and (max-width: 768px)
so I had to to this for the iPad:
所以我不得不为 iPad 做到这一点：
@media only screen and (device-width: 768px)
However, I have the exact same code inside both media queries, and that I cannot accept.
但是，我在两个媒体查询中都有完全相同的代码，我不能接受。
I tried this also:
我也试过这个：
@media only screen and (max-width: 767px) or (device-width: 768px)
This one above doesn't work either - it actually works for the desktop, no matter what width, and not on iPad. Really strange.
上面的这个也不起作用 - 它实际上适用于桌面，无论宽度如何，而不是在 iPad 上。真的很奇怪。
How to target both iPad and desktop with same media query?
如何使用相同的媒体查询同时定位 iPad 和桌面？
回答by Parker Young
You can use a comma to include two different rules inside the @media query. This would avoid redundant CSS for both devices when the rules are the same:
您可以使用逗号在 @media 查询中包含两个不同的规则。当规则相同时，这将避免两个设备的冗余 CSS：
@media only screen and (device-width: 768px),
only screen and (max-width: 768px) {
/* CSS */
}
The following codes are specifically for iPad (portrait and landscape):
以下代码专门用于 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 */
}
Hope this helps you! Let me know if you have questions or need clarification on this.
希望这对你有帮助！如果您对此有疑问或需要澄清，请告诉我。
回答by Amit
I have used this. work for me in all device.
我用过这个。在所有设备中为我工作。
@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){
}
回答by user2760338
You need this in your HTML then your media queries will work for both.
您需要在 HTML 中使用它，然后您的媒体查询将适用于两者。
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
