HTML响应式电子邮件:桌面/平板电脑的3列布局,电话的2列布局

时间:2015-12-03 16:43:03

标签: html responsive-design html-table media-queries html-email

尝试创建一个响应式HTML电子邮件,其中包含3列(多行)布局,用于桌面/平板电脑,并更改为2列(多行),以便使用表格显示电话(<table> <tr> { {1}})。我只在网上找到了从大型设备多列布局到主要使用表格的单列小型设备布局的解决方案。如何编写此类布局的最佳策略是什么?我尝试过主要从Mailchimp,Campaign Monitor和Litmus中引用资源。

以下代码从3列(大显示)到1列(手机显示)

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

1 个答案:

答案 0 :(得分:1)

您可能需要采取的方法是将其称为&#34; hybrid&#34;邮件构建。

基本的想法是首先为移动设备构建,因为Android的越来越受欢迎的Gmail客户端根本不支持样式标记(因此也不支持媒体查询)。然后,使用广泛支持的现代CSS为Webmail客户端,Thunderbird和Apple客户端构建列。最后,使用特定于Outlook的注释来创建&#34; ghost列&#34; (例如)将Outlook客户端打造成形状。 注意:此步骤仅在您的电子邮件提供商不会删除发送评论时才有效。

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

这里有关于此的精彩文章: http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919