CSS 3 个针对 iphone 肖像、风景和 ipad 肖像的媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13910255/
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
3 media queries for iphone portrait, landscape and ipad portrait
提问by John Magnolia
I have tried the different combinations of width& device-widthbut on the iPhone in landscape this code never turns the background red;
我已经尝试了width&的不同组合，device-width但是在横向的 iPhone 上，此代码永远不会将背景变成红色；
I am having problem when I have more than 1 media query. See this JSfiddle examplethe div background is never green unless you remove the last media query
当我有 1 个以上的媒体查询时，我遇到了问题。请参阅此JSfiddle 示例，除非您删除最后一个媒体查询，否则 div 背景永远不会是绿色的
This is what I would like 3 different media queries which target:
这就是我想要的 3 个不同的媒体查询，它们的目标是：
- both smartphones and tablets(portrait only). This will be where I have all my generic styles for responsive layout
- width: 320px - 479px - this will apply to small screens, such as iphone in portrait only
- width: 480px - 640px - this will apply to larger screens such as iphone in landscape and ipad in portrait. Not ipad in landscape.
- 智能手机和平板电脑（仅限纵向）。这将是我拥有响应式布局的所有通用样式的地方
- 宽度：320px - 479px - 这将适用于小屏幕，例如 iphone 仅纵向
- 宽度：480px - 640px - 这将适用于较大的屏幕，例如横向的 iphone 和纵向的 ipad。不是横向的ipad。
Note this is for a HTML email so its not possible to use JS.
请注意，这是针对 HTML 电子邮件，因此无法使用 JS。
@media only screen and (max-width: 640px) {
body { padding: 10px !important }
}
/* Small screen */
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) {
body { background: blue !important }
}
/* iPhone landscape and iPad portrait */
@media only screen and (max-device-width: 480px) and (max-device-width: 640px) {
body {
background: red !important
-webkit-text-size-adjust:none;
}
}
Reference: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
参考：http: //css-tricks.com/snippets/css/media-queries-for-standard-devices/
回答by Om Shankar
Your own attempt modified
您自己的尝试已修改
@media only screen and (max-width: 640px) and (orientation: portrait) {
body { padding: 10px !important }
}
/* Small screen */
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) and (orientation: portrait) {
body { background: blue !important }
}
/* iPhone landscape and iPad portrait */
@media only screen and (max-device-width: 480px) and (orientation: landscape),
@media only screen and (max-device-width: 640px) and (orientation: portrait) {
body {
background: red !important
-webkit-text-size-adjust:none;
}
}
回答by kernelpanic
Media queries also support device orientation. You should try that
媒体查询还支持设备方向。你应该试试
@media screen and (orientation:portrait) {
/* Portrait styles */
}
@media screen and (orientation:landscape) {
/* Landscape styles */
}
You can also combine them with width like so
你也可以像这样将它们与宽度结合起来
@media screen and (max-device-width : 320px) and (orientation:portrait) {
}
回答by mToce
Responsive emails can be tough because there are so many e-mail clients out there, and support can be limited for media queries. You may just want to look into making your divs fluid with percentages, so they scale, rather than media queries. The people at zurb have some great templates which may help out too. http://www.zurb.com/playground/responsive-email-templates
响应式电子邮件可能很困难，因为那里有太多的电子邮件客户端，并且对媒体查询的支持可能有限。您可能只想通过百分比使您的 div 变得流畅，因此它们可以缩放，而不是媒体查询。zurb 的人有一些很棒的模板，它们也可能有所帮助。http://www.zurb.com/playground/responsive-email-templates
Hope that helps.
希望有帮助。
回答by Richlewis
Take a look at this resource, will give you media queries for pretty much everything http://arcsec.ca/media-query-builder/, you need to be be specifying a min width aswell. also less of the !important, dirty :)
看看这个资源，它会给你几乎所有内容的媒体查询http://arcsec.ca/media-query-builder/，你还需要指定一个最小宽度。也少了！重要的，肮脏的:)
in your case
在你的情况下
@media only all and (min-device-width: 320px) and (max-device-width: 480px) {
/* insert styles here */
}
回答by sahil
i tried this by using Om's solution in a diff. way it worked for me, hope it helps someone
我通过在差异中使用 Om 的解决方案来尝试这个。它对我有用的方式，希望它可以帮助某人
@media only screen and (max-device-width:1024px) and (orientation: portrait) {
/*style*/
}
@media only screen and (max-device-width: 1024px) and (orientation: landscape) {
/*style*/
}
