Question

我正在尝试创建一个响应式电子邮件模板，以便发送给我公司的用户。我们的列表包含来自各种ISP（如Gmail / Yahoo等）的用户。我们的响应式设计在大多数情况下都有效，但我们遇到了雅虎的问题。

问题在于雅虎，它忽略了媒体查询css包装器，并在桌面版本上使用响应式css。在下面的示例中，@media only screen and (max-width: 580px)被忽略，我们的电子邮件在桌面上显示宽度为320px。

 @media only screen and (max-width: 580px) {
     .container {
        width: 320px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
     }
  }

Email On Acid和Campaign Monitor都建议使用CSS属性选择器来解决问题，但我们发现这会导致具有Yahoo应用程序的手机上的响应式移动布局以全宽度布局显示（它不是响应）。

@media only screen and (max-width: 580px) {
   body[yahoo] .container {
       width: 320px !important;
       margin: 0 !important;
       padding: 0 !important;
       overflow: hidden !important;
   }
}

有没有人找到解决方案，所以我们不需要在我们的CSS中使用属性选择器，并在桌面上使用Yahoo的电子邮件显示全宽度布局？

Answer 1

电子邮件是一种百分比游戏 - 我认为你可能不得不减少这方面的损失。无论如何都不支持媒体查询，因此您是never going to get 100% client support。

恕我直言流体布局是一种更好的100％支持驱动电子邮件布局的替代方案（您仍然可以使用分段输入的媒体查询来增强或调整每个客户端。）

Answer 2

雅虎确实忽略了您的媒体查询包装器。我已经进一步了解了你从广告系列监控器，关于酸的电子邮件以及使用属性选择器的修复中引用的内容，我个人并不喜欢这种解决问题的方法。所以我找到了另一种解决方案。当我编写电子邮件代码时，我会对所有CSS进行内联编码。当我做响应式电子邮件时，我的所有CSS都是内联的，但是当我需要更改特定媒体的内容时 - 我只使用媒体查询 - 显示/隐藏内容，更改宽度等等。因此雅虎问题成为一个主要的噩梦为了我。以下是我如何解决这个问题，并在电子邮件中保留了yahoo =“fix”的所有混淆。

类似于陈述和详细记录的内容，响应式电子邮件充其量不完美。它们不能在许多应用程序（Gmail，Yahoo等）上呈现，Gmail完全取出。老年客户充其量只能受到打击。但是，如果您的电子邮件必须具有响应能力，那么您也可以做到最好。到目前为止，在我的测试中，此修复似乎正常。或者，如果您担心有1px浏览器的人试图查看您的电子邮件，请尝试相反，使用媒体查询10000px宽，最小和最大。希望这个修复可以帮助一些人并澄清一些事情。这样就无需改变电子邮件中的HTML编码。修复CSS并继续移动。

雅虎完全无视您的媒体查询，所以您真正需要做的就是撤消媒体查询中的任何内容，如下所示：

/*---Here is my media query that shows and hides some content for mobile---*/

@media only screen and (max-width: 480px) {
.header1 {width:10%}
.tdlogo {width:80%;}
.logo {margin: 0 auto;}
.expand80 {width:80% !important;}
img.show {width:100% !important;}
.show {
display:block !important;
max-height:none !important;
overflow:visible !important;
}
.hide {
display:none !important;
width:0% !important;
max-width:0px !important;
}
}

/*---This media query undoes my original media query, and will never be used by anything except for yahoo since it is ignoring my media query to begin with---*/


@media only screen and (min-width: 1px) and (max-width: 1px) {
.header1 {width:5%}
.tdlogo {width:25%;}
.logo {margin: 0 auto;}
img.show {width:0px !important;}
.expand80 {width:60% !important;}
.show {
display:none !important;
max-height:0px !important;
overflow:hidden !important;
}
.hide {
display:block !important;
width:20% !important;
max-width:none !important;
}
}

Answer 3

雅虎！邮件只修复了他们的CSS解析器，因此媒体查询中不再需要属性选择器（除非你想使用它们）

http://freshinbox.com/blog/yahoo-mail-fixes-media-query-bug-yahoo/

电子邮件中的响应式设计 - 雅虎中的属性选择器问题

3 个答案: