3个媒体查询iphone肖像,风景和ipad肖像

Question

我尝试了不同的width&组合,device-width但是在横向上这个代码永远不会把背景变成红色;

当我有多个媒体查询时,我遇到了问题.看到这个JSfiddle示例,除非删除最后一个媒体查询,否则div背景永远不会是绿色

这就是我想要的3个不同媒体查询的目标:

1. 智能手机和平板电脑(仅限肖像).这将是我拥有响应式布局的所有通用样式的地方
2. 宽度:320px - 479px - 这将适用于小屏幕,例如仅限肖像的iphone
3. 宽度: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/

Answer 1

你自己的尝试被修改了

@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; 
    }
}