响应式电子邮件模板答案

【问题标题】：Responsive email template响应式电子邮件模板
【发布时间】：2015-11-11 05:42:36
【问题描述】：

我正在处理一个电子邮件模板，我想在其中为桌面创建three columns grid structure，为移动设备创建single column structure，我不想使用媒体查询，因为它在 android 设备中不受支持。有什么方法可以实现吗？

【问题讨论】：

【解决方案1】：

安舒尔，只要您使用表格堆叠而不是 TD 堆叠，Android 就支持媒体查询。更多信息在这里：https://www.emailonacid.com/blog/article/email-development/how_android_is_strangling_responsive_design

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

我编写并维护了Cerberus templates； 混合型实现了您所要求的。

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

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

【讨论】：