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

Question

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

下面的代码从3列（大屏幕）到1列（电话屏幕）

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

Answer 1

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

基本思想是先为移动设备构建，因为Android越来越流行的Gmail客户端根本不支持样式标签（因此也不支持媒体查询）。 然后，使用广泛支持的现代CSS为Webmail客户端，Thunderbird和Apple客户端构建列。 最后，使用特定于Outlook的注释来创建“重影列”（例如），以使Outlook客户端处于良好状态。 注意：仅当您的电子邮件提供商没有在发送中删除注释时，此步骤才有效。

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

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