方法一：弹性布局
让我们从表格容器开始看起：
<table border="0" cellpadding="0" cellspacing="0" width="500" class="wrapper">
<tr>
<td>…Content…</td>
</tr>
</table>弹性表格永远是500像素宽有什么好处呢？让我们再一次看一下容器表格。注意我使用的 wrapper 类。我们将会通过媒体查询使用这个类选择器使我们的邮件达到真正的响应式。
在电子邮件中使用媒体查询
在电子邮件中使用媒体查询与在网页设计中一样。你可以在电子邮件中的头部引用媒体查询，从而使你的样式针对不同的设备属性做出调整。
简单而言，我们将视窗（viewports）针对在 max-width 525像素及以下。然后针对那个容器表格，我们覆盖他们的 HTML 属性与内联样式来强制表格水平占满移动设备屏幕
@media screen and (max-width:525px) {
table[class=“wrapper”]
width:100% !important;
}
}我们也可以其他任何嵌套在内层的表格设置一样的效果来给内容节点布局以提升在移动设备上的体验。在移动设备上增加文字和按钮的大小也是个好主意。
@media screen and (max-width:525px) {
body, table, td, a {
font-size:16px !important;
}
table[id=“responsive-table”] {
width:100% !important;
}
}使用媒体查询的唯一缺点是媒体查询的兼容性并不太好。虽然像 iOS Mail 和 Android 默认客户端那样的基于 WebKit 渲染引擎的邮件客户端上没问题，但是在老旧的黑莓设备、Windows Phone 8 和所有平台的 Gmail 应用都会无视媒体查询。
幸运的是，iOS 和 Android 在移动邮件收发设备中 占据了大多数，所以大多数订阅者都可以按照你的设计看到你的响应式邮件。
方法二：流体布局
您可以设计和构建一个在每个邮件应用程序中都非常出色的电子邮件，包括那些不支持媒体查询的邮件。您可以使用流体布局来完成此操作。
但是，您必须做出一些设计妥协。堆叠到单个列的那些可爱的相等列布局使用此方法不能很好地工作。如果你能学会没有它们，那么有一些非常实用的设计可以很好地工作。
入门
让我们从空白画布开始吧。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A Simple Responsive HTML Email</title>
<style type="text/css">
body {margin: 0; padding: 0; min-width: 100%!important;}
.content {width: 100%; max-width: 600px;}
</style>
</head>
<body yahoo bgcolor="#f6f8f1">
<table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
Hello!
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>例子详解
参考地址：从头开始构建HTML电子邮件模板
- 为电子邮件添加一个整体结构，从标签开始。我们将body标签上的margin和padding设置为零，以避免任何意外空间。
- 将cellpadding和cellspacing设置为零，以避免表中出现任何意外空间。
- 现在在容器表中放置一个600像素宽的居中表。在大多数屏幕分辨率下，600像素是电子邮件在大多数桌面和Webmail客户端中轻松显示的安全最大宽度。
- 注意：我们将离开border=”1”，以便我们可以看到布局的骨架。我们将在最后通过简单的查找和替换删除它们。
- 使用width属性，使用HTML而不是CSS设置此宽度。HTML电子邮件开发中的黄金法则是：如果HTML中存在属性，请使用该属性而不是CSS。
我们还添加了一个将border-collapse属性设置为的内联样式属性collapse。如果我们不这样做，较新版本的Outlook将在我们的表和边框之间添加一个小空间。
创建正文和主表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demystifying Email Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0;">
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
<tr>
<td>
Hello!
</td>
</tr>
</table>
</body>
</html>创建结构和标题
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
//第一部分-
<tr>
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />
</td>
</tr>
//第二部分
<tr>
<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;">
<table border="1" cellpadding="0" cellspacing="0" width="100%">//此表的宽度设置为100％而不是使用像素值，因为如果我们想要使电子邮件响应，这将有助于我们进一步走下去
<tr>
<td>
Row 1
</td>
</tr>
<tr>
<td style="padding: 20px 0 30px 0;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
<tr>
<td>
//将两列内容添加到第3行。因为希望在这两个单元格之间存在“边距”，但不支持边距，我们将创建一个三列表，其中一个空单元格两个外柱。
<table border="1" cellpadding="0" cellspacing="0" width="100%">//尽我喜欢坚持使用百分比，但当您拥有特定大小的内容时，将其转换为百分比可能会非常棘手（在此示例中，列将为48.1％，这可能会让人感到困惑）。出于这个原因，由于我们的两个图像宽度为260px，我们将创建宽度为260px的列，中间有20px的边距单元。（这将总计540px，这是我们表格的600px宽度减去两侧30px的填充。）确保将字体大小和行高度归零，并 在边距单元格中添加一个不间断的空格字符。
<tr>
<td width="260" valign="top">//我们还将为两个单元格设置valignto "top"，以便它们将垂直对齐到顶部，即使一列的文本多于另一列。默认的垂直对齐方式是"middle"。
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="images/left.gif" alt="" width="100%" height="140" style="display: block;" />
</td>
</tr>
<tr>
<td style="padding: 25px 0 0 0;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
</table>
</td>
<td style="font-size: 0; line-height: 0;" width="20">
</td>
<td width="260" valign="top">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="images/right.gif" alt="" width="100%" height="140" style="display: block;" />
</td>
</tr>
<tr>
<td style="padding: 25px 0 0 0;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
//第三部分
<tr>
<td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="75%">
® Someone, somewhere 2013<br/>
Unsubscribe to this newsletter instantly
</td>
<td align="right">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="http://www.twitter.com/">
<img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" />
</a>
</td>
<td style="font-size: 0; line-height: 0;" width="20"> </td>
<td>
<a href="http://www.twitter.com/">
<img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>- 作为bgcolor一个有效的HTML属性，我们将使用它来设置背景颜色而不是CSS。永远记住要使用十六进制代码的完整六个字符，因为三个字符的速记并不总是有效。
- 使用填充：最好用padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;少用padding: 10px 10px 8px 5px;避免将获得不可预测的结果。但是，如果您在使用填充时遇到更大的麻烦（例如，如果您的发送平台正在剥离您的CSS），请不要使用它。只需使用空单元格即可创建空间。没有必要使用间隔GIF，只需确保添加style=”line-height: 0; font-size: 0;”到单元格，放置一个 内部，并给它一个明确的高度或宽度。像这样：
<tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr>另请注意，在 td 标签上使用填充是安全的，但在P标签或DIV上不使用填充。他们表现得更加不可预测。
- 插入我们的图像，添加替代文字并添加style=”display:block;”这是一个常见的修复程序，可以阻止某些电子邮件客户端在图像下方添加间隙。
- 通过添加align=”center”到我们的td标记来居中图像。
- 添加一个alt标签，这对于我们最初加载电子邮件非常重要，在大多数情况下，这些电子邮件会关闭图像。像这样：
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" />
</td>经过和替换的每一次出现border=”1”,用border=”0”。
让我们通过W3C验证器运行它，以确保没有任何问题。