响应式电子邮件背后的理念

假设您设计了一个包含 3 列的 HTML 电子邮件。由于 电子邮件客户端中有限且奇怪的 CSS 支持，电子邮件设计是使用表格完成的。这种 3 列设计在大屏幕上看起来很棒，但在小屏幕上则会显得非常拥挤。理论上，媒体查询可以在这里拯救我们，但正如我们 甚至不能依赖浮动，我们当然也不能依赖媒体查询。不过，仍然有办法。

在本文中，我只想探究一些关于响应式电子邮件的理念。这些理念并非健壮的、可用于生产环境的理念，我只是觉得思考起来很有趣。这些理念的灵感来自最近听 Fabio Carneiro 的演讲。Fabio 在 MailChimp 工作，负责处理所有这些复杂的电子邮件布局，并在演讲中分享了一些关于响应式电子邮件背后的理念。他还拥有 一门 Treehouse 课程，专门讲解电子邮件设计。

Jason Rodriguez 也 写了一篇文章，探讨了这个主题。

带有 align=”left” 的行

以下是布局中的一些片段

您可能会想：每个片段都是一个 <td>。但事实并非如此，如果是这样的话，在电子邮件有限的 CSS 世界中，您将永远无法使它们换行。

实际上，每个片段都是一个 <table align="left">。 Align 是一个古老的、已弃用的属性，但它在所有电子邮件客户端中都仍然受支持。它有点像浮动，但我们不能使用浮动。我认为它更像是在让表格的行为类似于一个 inline-block 元素。您可以控制它的宽度，它可以与其他内容位于同一行，并且仍然可以换行。

所以这就像

<table class="main-wrapping-table">
  
  <tr>
 
     <td>
  
         <table align="left" style="width: 33.33%">
         </table>

         <table align="left" style="width: 33.33%">
         </table>

         <table align="left" style="width: 33.33%">
         </table>

    </td>

  </tr>

</table>

里面还会有一堆其他内联 CSS，用于进行居中等等，但这只是布局概念。

将这个理念扩展到其他包含不同数量片段的行，我们得到了以下结果

这是一个相当不错的基础，它没有使用任何电子邮件客户端无法使用的功能。

带有 min-width 的可换行行

一些电子邮件客户端支持 min-width。因此，如果我们将它放在需要它的片段上，我们可以使这些行在合理的位置换行。

您可以将 CSS 直接放在表格片段上，例如

<table align="left" style="width: 33.33% min-width: 200px;" class="chunk">
<table>

效果更好。现在，每个片段将在需要的位置换行，并且不会变得过于拥挤。

使用 @media 查询填充空间

一些电子邮件客户端支持 @media 查询，因此如果是这种情况，我们将针对这些片段，并确保在出现这些换行时，它们能够更好地填充空间。

/* Figure out where the breaks happen and use that in the media query */
@media (max-width: 400px) {
  .chunk {
    width: 100% !important;
  }
}

效果更好。您可以做得比我更好，确保所有换行都按照您的计划进行。

使用 max-width 控制宽度

过于拥挤不好，过于宽也不好。不妨在支持 max-width 的浏览器中限制容器表格的宽度。

<table style="max-width: 600px; margin: 0 auto;" class="main-table">

</table>

演示

再说一次，这并不是完全可用于生产环境的，只是为了演示这些理念。

查看 CodePen 上 Chris Coyier 的 “响应式”电子邮件 (@chriscoyier)。

如果您想要可用于生产环境的解决方案，我可能会使用 MailChimp 的 Email Blueprints。他们似乎使用了一个严格的、固定的断点。因此，它只会根据可用的屏幕空间显示“桌面”或“移动”版本。可以说，这是“自适应”设计。我认为这在 HTML 电子邮件设计中是可取的。