响应式 Html 电子邮件模板

Posted 2023-03-05

【中文标题】响应式 Html 电子邮件模板

【英文标题】：Responsive Html Email Template

【发布时间】：2013-09-16 02:01:14

【问题描述】：

我正在编写 html 电子邮件，它应该足以在所有手机中完美呈现。我是为桌面等编写电子邮件的专家，这封电子邮件在所有电子邮件客户端和浏览器中都能完美呈现，但我必须使其完美适用于手机。我的代码结构如下：

<table>
<tr>
 <td > <table>complete left table </table></td>
 <td > <table>complete middle table </table></td>
 <td > <table>complete right table </table></td>

</tr>
 </table>

为了使它对手机有用我知道我需要媒体查询但不知道如何使用它，有人可以参考我相关的教程，可以帮助我做我的具体案例。请看附图，左边是台式机，右边是手机：

【参考方案1】：

更新：这个答案有一个big list of email resources，包括响应式设计链接

这里有一些关于响应式设计的资源：

Litmus responsive how to guide（滚动到底部） Campaign Monitor responsive guide

这里有一个很好的模板可以帮助您入门：

Email on Acid's Responsive template

【讨论】：

哦，真的有帮助（Y）