4

我已经尝试了width&的不同组合，device-width但在 iPhone 上，这个代码永远不会把背景变成红色；

当我有超过 1 个媒体查询时，我遇到了问题。请参阅此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/

4

5 回答 5

24

您自己的尝试已修改 

@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; 
    }
}
于 2012-12-23T17:33:33.703 回答
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) {

}
于 2012-12-17T08:07:01.497 回答
1

看看这个资源，它将为您提供几乎所有内容的媒体查询http://arcsec.ca/media-query-builder/，您还需要指定最小宽度。也少了！重要的，肮脏的:)

在你的情况下

@media only all and (min-device-width: 320px) and (max-device-width: 480px) {
/* insert styles here */
}
于 2012-12-17T08:01:06.557 回答
1

响应式电子邮件可能很困难，因为那里有太多的电子邮件客户端，并且对媒体查询的支持可能有限。您可能只想考虑使您的 div 具有百分比流动性，因此它们可以缩放，而不是媒体查询。zurb 的人有一些很棒的模板，它们也可能会有所帮助。http://www.zurb.com/playground/responsive-email-templates

希望有帮助。

于 2012-12-20T12:05:47.307 回答
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*/
}
于 2017-11-02T17:40:49.197 回答