HTML 响应式电子邮件答案

【问题标题】：HTML Responsive EmailHTML 响应式电子邮件
【发布时间】：2014-07-04 02:53:03
【问题描述】：

使用 Litmus 响应式电子邮件在大多数浏览器中都显示出很好的结果，但是电子邮件中的某些对象使用 Display:none !important; 并且仍然完全显示在 Yahoo / Gmail 中，部分显示在 Outlook 2013 中。

更新：提供示例 -

使用样式代码如下

基本样式

.mobile {显示：无；字体大小：0；最大高度：0；行高：0； mso隐藏：全部；}

@媒体

table[class=mobile] {display:block !important;line-height:1.5% !important;最大高度：无！重要；字体大小：12px !important;}

`<table class="mobile">
<tr>
<td>This should show up on mobile
</td>
</tr>
</table>

在大多数浏览器上通过石蕊只显示一个或另一个，但在 Gmail 上它同时显示移动设备和浏览器文本

【问题讨论】：

不是没有细节/例子，没有。
如果你想出一个万无一失的方法来让人们回复你的电子邮件，请分享它;-)
@TylerH Responsive subscribers 是另一个挑战...
我们能否提供更多信息 - 您究竟想在邮件中隐藏什么？
欢迎来到 Stack Overflow！示例电子邮件代码将是一个很好的第一步，结合正确和错误呈现的屏幕截图。

标签： html email responsive-design html-email

【解决方案1】：

Outlook 2013 或 googlemail 不支持display - http://www.campaignmonitor.com/css

但是z-index 是。所以你可以尝试设置一个否定的z-index。我没有对此进行测试，但值得一试。

【讨论】：

您不需要position 才能使用z-index吗？
像 Gmail 这样的网络客户端不太喜欢position。想象一下position:fixed; 会对 Gmail 界面做些什么......
我无法让 z-index 在 Outlook 上正常工作，我不推荐它。再加上你必须做一些 mso 条件来防止位置破坏其他一切。将您计划隐藏的任何部分包装在  ...  中要容易得多

【解决方案2】：

鉴于您的问题缺乏任何相关信息，我只能建议您。

阅读并遵循此处的信息 http://kb.mailchimp.com/article/how-to-code-html-emails/ 特别注意一点 99% 的 CSS 将无法工作（尤其是在 Gmail、Yahoo!Mail 等基于浏览器的电子邮件服务中）。
尽可能避免使用 css，像 1999 年那样编写代码 - 是的，使用表格
如果您必须使用 css，请使用内联，而您不能使用内联的内容放在正文而不是头部。

所以如果你想隐藏一些东西？？我们不知道的事情 - 您需要更多地开始思考诸如白色背景上的白色文本之类的事情。

【讨论】：

【解决方案3】：

试着把你的移动桌子包装在这个里面：

<!--[if !mso]><!-->
<div class="mobileonly" style="display:none; width:0px; max-height:0px; overflow:hidden;">
    <!-- tables! -->
</div>
<!--<![endif]-->

然后在您的媒体查询中

div[class="mobileonly"] {
    display:block !important;
    overflow : visible !important;
    width:auto !important;
    max-height:inherit !important;
}

【讨论】：

【解决方案4】：

我知道这是一篇旧帖子。

解决方案是使用 html 表格来布局电子邮件内容，这些内容在 Outlook 上看起来和工作得很好。然后将列包装在中，以便 td 列将在其他电子邮件客户端（如 gmail、移动电子邮件等）上被杀死。

通过这种方式，您可以在 Outlook 上创建包含两列的电子邮件，但在非 Outlook 上包装这些列。

【讨论】：