HTML 响应式电子邮件:desktop/tablet 的 3 列布局到 phone 的 2 列布局

HTML Responsive Email: 3 column layout for desktop/tablet to 2 column layout for phone

尝试创建响应式 HTML 电子邮件,其中 desktop/tablet 具有 3 列(多行)布局,并使用表格显示 phone 更改为 2 列(多行) (<table> <tr> <td>)。我只在网上找到了从大型设备多列布局到主要使用表格的单列小型设备布局的解决方案。编写此类布局的最佳策略是什么?我尝试主要从 Mailchimp、Campaign Monitor 和 Litmus 引用资源。

下面的代码从 3 列(大显示)变为 1 列(phone 显示)

Link 编码:https://github.com/alexwang949/html-responsive-email/blob/master/tables.html

您可能需要采用的方法就是众所周知的 "hybrid" 电子邮件构建。

基本思想是首先为移动设备构建,因为 Android 日益流行的 Gmail 客户端根本不支持样式标签(因此也不支持媒体查询)。然后,使用广泛支持的现代 CSS 为网络邮件客户端、Thunderbird 和 Apple 客户端构建列。最后,使用特定于 Outlook 的注释来创建 "ghost columns"(例如)以使 Outlook 客户端成形。 注意:此步骤仅在您的电子邮件提供商未删除发送评论时有效。

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

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