响应式电子邮件模板

Question

我正在开发一个电子邮件模板，其中我想为桌面创建three columns grid structure，为移动设备创建single column structure，我不想使用媒体查询，因为它不受支持Android设备。有没有办法实现这个目标？

Answer 1

Anshul， 只要您使用表格堆叠而不是TD堆叠，Android就支持媒体查询。更多相关内容：https://www.emailonacid.com/blog/article/email-development/how_android_is_strangling_responsive_design

你的另一个选择，它将使它在任何地方工作，是使用流体混合设计：http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

Answer 2

您可以查看混合电子邮件模板。您可以查看demo here或获取示例source code

此方法使用ghost table修复Outlook桌面中的列问题。

Answer 3

正如其他人所说，你应该研究电子邮件设计的混合或海绵方法，它使用最小/最大宽度而不是媒体查询来重新配置布局。< / p>

我编写并维护Cerberus templates; 混合可以实现您的要求。

  

此模板使用混合方法重新配置布局   电子邮件客户端的不同屏幕大小，无论媒体查询   支持。在其核心，它使用最大宽度和最小宽度来施加刚性   基线（允许一些移动）并施加固定的宽宽度   无论如何，Outlook被束缚在桌面上。一旦移动友好   设置基线后，媒体查询会逐步增强电子邮件   在支持它的客户中。

此代码主要基于Fabio Carneiro's hybrid code。他的代码包含一个（相对）简单的3 column fluid scaffold，您可能会对此有所帮助。