3媒体查询iphone肖像,风景和ipad肖像 [英] 3 media queries for iphone portrait, landscape and ipad portrait
本文介绍了3媒体查询iphone肖像,风景和ipad肖像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我尝试过 width
& device-width
但是在横向的iPhone上,这个代码从来不会变成背景红色;
I have tried the different combinations of width
& device-width
but on the iPhone in landscape this code never turns the background red;
我有超过1个媒体查询。请参阅此 JSfiddle示例 div背景永远不是绿色的,除非您删除最后一个媒体查询
I am having problem when I have more than 1 media query. See this JSfiddle example the div background is never green unless you remove the last media query
这是我想要3个不同的媒体查询,目标是:
This is what I would like 3 different media queries which target:
- 智能手机和平板电脑(仅限纵向)。这将是我有所有我的通用样式的响应布局
- width:320px - 479px - 这将适用于小屏幕,如只在纵向的iphone
- width:480px - 640px - 这将适用于较大的屏幕,如横向中的iphone和纵向中的ipad。不ipad在景观。
注意这是HTML电子邮件,因此无法使用JS。
Note this is for a HTML email so its not possible to use 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;
}
}
这篇关于3媒体查询iphone肖像,风景和ipad肖像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文