1

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

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

 @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 在桌面上以全角布局显示电子邮件？

4

3 回答 3

2

电子邮件是一个百分比游戏——我认为你可能不得不减少在这个游戏上的损失。无论如何都不能完全支持媒体查询，因此您永远不会获得 100% 的客户支持。

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

于 2013-10-25T13:50:28.323 回答
1

雅虎确实忽略了您的媒体查询包装器。我从活动监视器、关于酸的电子邮件和使用属性选择器的修复中进一步看到了您所引用的内容，我个人不喜欢这种解决问题的方法。所以我找到了一个替代解决方案。当我对电子邮件进行编码时，我对所有的 CSS 进行内联编码。当我发送响应式电子邮件时，我的所有 CSS 都是内联的，但是我只在需要更改特定媒体的内容时使用媒体查询 - 显示/隐藏内容、更改宽度等。所以雅虎问题成为了一场噩梦为了我。以下是我解决它的方法，并将 yahoo="fix" 的所有混乱排除在我的电子邮件之外。

与所述和有据可查的内容类似，响应式电子邮件充其量是不完美的。它们不会在许多应用程序（Gmail、Yahoo 等）上呈现。Gmail 完全摆脱了您的负担。年长的客户充其量只是碰碰运气。但是，如果您的电子邮件必须具有响应性，不妨尽您所能。到目前为止，在我的测试中，此修复程序似乎可以正常工作。或者，如果您担心使用 1 像素浏览器的人试图查看您的电子邮件，请尝试相反的方法，使用媒体查询来获取 10000 像素的最小和最大宽度。希望这个修复可以帮助一些人并澄清一些事情。这完全不需要更改电子邮件中的 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;
}
}
于 2013-11-26T17:16:07.773 回答
0

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

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

于 2015-03-04T03:44:12.237 回答