一盒用于构建响应电子邮件的技巧

响应式邮件设计指南：让您的邮件在各种设备上都能完美呈现

核心要点

• 随着移动设备在邮件阅读中的普及，响应式邮件布局必须考虑移动设备的特性。这需要重新排列邮件内容，将原本水平排列的单元格在移动设备上垂直排列。
• 单列邮件布局（通常包含单个标题图像）无需重新排列元素，只需调整宽度以匹配设备尺寸即可。这属于可缩放设计而非响应式设计。
• 多列邮件布局需要随着设备宽度的减小重新排列列。这可以通过使用嵌套表格或更改表格单元格的 display 属性来实现。后者更优雅，并使用原生的 CSS 规则。
• 响应式邮件中的图像只需要经典的响应式技术（img {max-width: 100%;}）。但是，使用媒体查询，可以隐藏一个图像，并用另一个图像作为背景图像代替。

图片提供：fishbulb1022

在之前的关于新闻稿撰写的文章中，我们已经了解到一些技巧可以极大地改变您的邮件在不同客户端中的显示方式。

此外，我们必须考虑移动设备，其在邮件阅读中的使用量日益增长。这就引出了为邮件构建响应式布局的问题。

由于我们知道邮件模板是用 HTML 表格构建的，并且具有内联 CSS，因此我们的工作比平时要复杂一些：

• 内联 CSS 规则具有较高的特异性值（它们总能获胜）。
• 表格并非设计用于布局组合，因此我们必须注意邮件的组合，记住单元格（自然水平定位）应该在移动设备上垂直排列。
• 当然，我们不能使用 JavaScript。

幸运的是，大多数移动设备都具有与现代 CSS 规则的高兼容性，因此我们可以轻松地使用媒体查询解决所有这些问题，大量使用 !important 声明（以覆盖内联样式），并仔细注意内容的排列方式。

对于此类项目，采用“移动优先”方法非常重要，可以避免在小型设备上无法正确排列的布局。

请注意，即使在本文中我们只讨论响应式问题，响应式移动邮件也不一定是好的邮件。有效的移动邮件设计涉及许多元素，包括字体大小、布局组合等等：这些都是非常重要的任务，我们将在另一篇文章中介绍。

邮件布局模式

关于响应式，我们可以识别两种类型的邮件：单列和多列。

单列布局

单列布局（通常只有一个标题图像）没有特殊需求。由于它们不需要重新排列元素，我们只需要注意所有宽度都能优雅地降级以匹配设备尺寸。这并非响应式设计，而是可缩放设计的经典示例（参见《可缩放、流畅或响应式：了解移动邮件方法》）。

单列布局

为了确保您的邮件正确调整大小，您只需要调整表格宽度：

<table> cellspacing="0" cellpadding="0" border="0" width="600">

</table>

@media screen and (max-width:480px) {
    table {
        width: 100%!important;
    }
}

您还需要调整图像大小（参见本文末尾的“关于图像”段落）并调整字体大小，但没有其他特殊需求。

多列布局

多列布局需要随着设备宽度的减小重新排列列。无论您使用两列、三列还是更多列，都需要将它们垂直显示而不是水平显示。

实现此目的有两种简单的方法：

1. 使用嵌套表格
2. 更改表格单元格的 display 属性。

嵌套表格布局

邮件组合通常需要使用嵌套表格。这始终被认为是确保客户端兼容性的最佳方法，但另一方面，生成的代码非常混乱且实际上难以阅读。

技巧在于使用 table align="left" 属性，该属性导致表格水平对齐。

每个元素必须具有特定宽度，并且它们的总和必须与它们的容器值相同。

当设备宽度减小时，我们必须调整容器大小并将所有表格列强制为 100% 宽度。

table[class="body_table"] {
    width: 600px;
}

table[class="column_table"] {
    width: 180px;
}

table[class="spacer_table"] {
    width: 30px;
    height:30px;
}

@media only screen and (max-width: 480px) {
    table[class="body_table"] {
        width: 420px!important;
    }
    table[class="column_table"] {
        width: 100%!important;
    }
}

此技术确保与大多数客户端兼容：我在 Litmus 中测试了演示文件，并且所有客户端都获得了良好的结果，允许以下警告：

• Outlook 2007、2010 和 2013（这些版本的 Outlook 使用 Microsoft Word 作为渲染引擎：参见 Litmus 博客上的《Microsoft Outlook 客户端渲染差异指南》）；
• 最旧版本的 Lotus Notes；
• Gmail Android 应用。

这是一个良好的起点（有关测试的部分结果，请参见下文），我们还必须考虑这个测试是用空表格构建的：添加内容（和更多嵌套表格！！）您应该能够修复所有错误并使此技术与所有客户端都能正常工作。

Litmus 兼容性测试部分结果

更改表格单元格的 display 属性

构建多列邮件的第二种方法更优雅，并使用原生的 CSS 规则。

此技术包括在设备宽度减小时更改默认表格单元格的 display 属性（您可以在 responsiveemailpatterns.com 上找到许多示例）。这会导致单元格垂直重新堆叠：

更改显示方案

<table> cellspacing="0" cellpadding="0" border="0" width="600">

</table>

此测试的结果非常好：所有客户端都正确呈现了测试邮件（有时存在细微的错误），但请记住，我们尝试过空邮件，添加内容后结果可能会有所不同。

关于图像

在响应式邮件中，图像只需要我们目前在 Web 中使用的经典响应式技术（img {max-width: 100%;}）。

但是，正如 Campaign Monitor 响应式邮件设计指南中建议的那样，使用媒体查询，您可以隐藏一个图像，并用另一个图像作为背景图像代替。

@media screen and (max-width:480px) {
    table {
        width: 100%!important;
    }
}

请记住，即使通过 CSS 隐藏的图像也会加载到客户端，因此请注意这一点。

一个不错的选择是将同一图像用于 img 标签和 background-image 源。您必须准备一个多用途图像，以便用于所有这些范围，就像下面的示例一样：

选择合适的图像后，您可以将其用于许多媒体查询断点。准备就绪后，您只需要添加少量 CSS 规则：

table[class="body_table"] {
    width: 600px;
}

table[class="column_table"] {
    width: 180px;
}

table[class="spacer_table"] {
    width: 30px;
    height:30px;
}

@media only screen and (max-width: 480px) {
    table[class="body_table"] {
        width: 420px!important;
    }
    table[class="column_table"] {
        width: 100%!important;
    }
}

您还可以添加 background-size 属性以调整每个断点视图（注意客户端对此规则的支持）。

不幸的是，这不太可能解决您对高密度设备的所有需求——但是它可以减少为所有其他情况加载的文件数量。

结论

那么，是否存在一种单一的、万能的、有史以来最好的响应式邮件创作技术呢？

通常情况下，答案是否定的。每个项目都需要不同的方法，并且有不同的最佳解决方案。真正的答案是掌握一系列有用的技术，并不断尝试新的方法。

资源

• https://www.php.cn/link/f663b8c9b8331a8c625007b4337601ec
• https://www.php.cn/link/90e08c6d15d206857d4fd54fa2f334bc
• https://www.php.cn/link/ae0de04da95f06c3c85934ea84bcccc0
• https://www.php.cn/link/a35e2f4a3fa64ee63ab18d8072b3a806
• https://www.php.cn/link/3d4233a54febe35fbf7749c3affb8e15
• https://www.php.cn/link/00b5d2692a781b6a9d3d1522c6e9d1ad
• https://www.php.cn/link/7006bc554a1a9de85c416551c10368e2

关于构建响应式邮件的常见问题

（此处省略了原文中提供的常见问题解答部分，因为该部分内容与原文其他部分相比，改写难度较小，且篇幅较长，为避免输出过长，此处略去。）

以上是一盒用于构建响应电子邮件的技巧的详细内容。更多信息请关注PHP中文网其他相关文章！