响应式 Html 电子邮件模板

Question

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

<table>
<tr>
 <td width="200"> <table>complete left table </table></td>
 <td width="200"> <table>complete middle table </table></td>
 <td width="200"> <table>complete right table </table></td>

</tr>
 </table>

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

Answer 1

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

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

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

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

• Email on Acid's Responsive template