3个iphone纵向、横向和ipad纵向媒体查询

我已经尝试了

宽度

和

设备宽度

的不同组合，但在iPhone的横向屏幕上，此代码从未将背景变成红色

当我有一个以上的媒体查询时，我遇到了问题。如图所示，除非删除最后一个媒体查询，否则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; 
    }
}

---

参考资料：

查看此资源，将为您提供几乎所有内容的媒体查询，您还需要指定最小宽度。也少了！重要，肮脏：）

就你而言

@media only all and (min-device-width: 320px) and (max-device-width: 480px) {
/* insert styles here */
}

---

媒体查询还支持设备定向。你应该试试

@media screen and (orientation:portrait) {
    /* Portrait styles */
}

@media screen and (orientation:landscape) {
    /* Landscape styles */
}

您也可以像这样将它们与宽度组合在一起

@media screen and (max-device-width : 320px) and (orientation:portrait) {

}

---

响应电子邮件可能很困难，因为有太多的电子邮件客户端，对媒体查询的支持可能会受到限制。你可能只想考虑让你的div与百分比保持一致，这样它们就可以缩放，而不是媒体查询。zurb的人有一些很好的模板，可能也会有所帮助

---

希望有帮助

您自己的尝试已被修改

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

---

我试着用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*/
}

---

谢谢，虽然我已经看了链接，但所有的选择只是混乱。我必须使用

！重要信息

，因为它用于HTML电子邮件，我需要覆盖内联样式。请注意，逗号

，

用作

或
，而
和
用作
和
。因此，您可以始终组合媒体查询。@media-only-screen and（最大设备宽度：480px）和（方向：横向）--不适用于iphone横向，无法识别DHI，我使用的是ios 6，iphone 4，对“iphone横向”的媒体查询不适用于我，其余工作这是我的完整回答：-@media-only-screen and（最大设备宽度：1024px）和（方向：纵向）{/*style*/}}@media-only屏幕和（最大设备宽度：1024px）和（方向：横向）{/*style*/}