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

时间:2012-12-17 07:55:38

标签: iphone css media-queries landscape portrait

我尝试了width&的不同组合device-width但在横向的iPhone上,此代码永远不会将背景变为红色;

当我有多个媒体查询时,我遇到了问题。除非您删除最后一个媒体查询

,否则请参阅此JSfiddle example div背景从不为绿色

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

  
      
  1. 智能手机和平板电脑(仅限肖像)。这将是我拥有响应式布局的所有通用样式的地方
  2.   
  3. 宽度:320px - 479px - 这适用于小屏幕,例如仅限iphone的iphone
  4.   
  5. 宽度:480px - 640px - 这适用于较大的屏幕,例如横向的iphone和纵向的ipad。不是风景中的ipad。
  6.   

请注意,这是针对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/

5 个答案:

答案 0 :(得分:21)

您自己的尝试修改了

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

答案 1 :(得分:3)

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

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

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

您也可以将它们与宽度结合起来

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

}

答案 2 :(得分:1)

看看这个资源,会给你几乎所有的http://arcsec.ca/media-query-builder/媒体查询,你需要指定一个最小宽度。还少了!重要的,脏的:)。

在你的情况下

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

答案 3 :(得分:1)

响应式电子邮件可能很难,因为那里有很多电子邮件客户端,并且对媒体查询的支持可能有限。你可能只想研究使用百分比使你的div流畅,所以它们可以扩展,而不是媒体查询。 zurb的人们有一些很棒的模板可能会有所帮助。 http://www.zurb.com/playground/responsive-email-templates

希望有所帮助。

答案 4 :(得分:0)

我通过在差异中使用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*/
}