HTML 响应式电子邮件：台式机/平板电脑的 3 列布局到手机的 2 列布局

Question

尝试创建响应式 HTML 电子邮件，该电子邮件具有 3 列（多行）布局用于桌面/平板电脑，并更改为 2 列（多行）用于使用表格的手机显示 (<table><tr><td>)。我只在网上找到了从大型设备多列布局到主要使用表格的单列小型设备布局的解决方案。如何编写这种类型的布局的最佳策略是什么？我尝试主要参考 Mailchimp、Campaign Monitor 和 Litmus 的资源。

下面的代码从 3 列（大显示）变为 1 列（手机显示）

代码链接：https://github.com/alexwang949/html-responsive-email/blob/master/tables.html

Answer 1

您可能需要采用的方法就是所谓的“混合”电子邮件构建。

基本理念是首先为移动设备构建，因为 Android 越来越流行的 Gmail 客户端根本不支持样式标签（因此也不支持媒体查询）。然后，使用广泛支持的现代 CSS 为 webmail 客户端、Thunderbird 和 Apple 客户端构建列。最后，使用 Outlook 特定的 cmets 创建“ghost columns”（例如）以将 Outlook 客户端快速成型。 注意：此步骤仅适用于您的电子邮件提供商未在发送时删除 cmets。

这是一个耗时的过程，需要一些策略，但最终这种分层方法会产生结果，这就是电子邮件游戏的名称。

这里有一篇很棒的文章： http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919