[英]3 media queries for iphone portrait, landscape and ipad portrait
我已尝试过width
和device-width
的不同组合,但在横向上的iPhone中,此代码永远不会将背景变为红色;
当我有多个媒体查询时,我遇到了问题。 看到这个JSfiddle示例 ,除非删除最后一个媒体查询,否则div背景永远不会是绿色
这就是我想要的3个不同媒体查询的目标:
- 智能手机和平板电脑(仅限肖像)。 这将是我拥有响应式布局的所有通用样式的地方
- 宽度:320px - 479px - 这将适用于小屏幕,例如仅限肖像的iphone
- 宽度:480px - 640px - 这将适用于较大的屏幕,如横向的iphone和纵向的ipad。 不是风景中的ipad。
请注意,这是针对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;
}
}
参考: http : //css-tricks.com/snippets/css/media-queries-for-standard-devices/
你自己的尝试被修改了
@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;
}
}
媒体查询还支持设备方向。 你应该试试
@media screen and (orientation:portrait) {
/* Portrait styles */
}
@media screen and (orientation:landscape) {
/* Landscape styles */
}
您也可以将它们与宽度相结合
@media screen and (max-device-width : 320px) and (orientation:portrait) {
}
看看这个资源,会给你几乎所有东西的媒体查询http://arcsec.ca/media-query-builder/ ,你需要指定一个最小宽度。 还少了!重要的,脏的:)
在你的情况下
@media only all and (min-device-width: 320px) and (max-device-width: 480px) {
/* insert styles here */
}
响应式电子邮件可能很难,因为那里有很多电子邮件客户端,并且对媒体查询的支持可能有限。 您可能只是想让您的div以百分比形式流动,因此它们可以扩展,而不是媒体查询。 zurb的人们有一些很棒的模板可能会有所帮助。 http://www.zurb.com/playground/responsive-email-templates
希望有所帮助。
我尝试使用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*/
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.