在没有媒体查询的情况下创建面向未来的响应式电子邮件

使用这种方法，您可以创建一个在布局中包含响应性的电子邮件，而无需在中使用 css 或媒体查询 <head>，因此即使在电子邮件呈现的最坏情况下，您的布局也将保持不变。

开发 html 电子邮件仍然很难吗？

HTML 电子邮件在过去十年中取得了长足的进步（是的，它曾经更糟糕！）但是在为收件箱编写响应式电子邮件时，仍然有很多事情可能会出错。

如今，大多数电子邮件应用程序在遵守最新的 HTML 和 CSS 标准方面做得很好，但安全性或其他限制有时意味着服务会调整或删除电子邮件代码的关键部分，例如最重要的部分<head>，这通常包含关键的 CSS 和媒体查询。很难跟踪发生此类事情的每个实例，更不用说您需要做些什么来减轻每种情况下的影响。

但是，如果您可以构建一个响应式的电子邮件模板，即使在不支持现代 CSS（如媒体查询）的环境中，或者仅<body>发送电子邮件的场景中，该怎么办？如果每次您听说某个每个人都在尝试的新电子邮件应用程序时，您不会因为恐惧而颤抖，而是因为知道您的响应式电子邮件可能看起来不错，而感到安全和放心？

本教程旨在使用HTML 电子邮件开发的流畅混合方法在没有任何嵌套 CSS 或媒体查询支持的电子邮件客户端中创建出色的体验。流动部分是指我们使用大量百分比和元素，这些百分比和元素可以移动和扩展以适应给定的空间。混合部分是因为我们还用来约束这些max-width自由流动的元素，并在更大的屏幕尺寸上限制电子邮件的整体尺寸。

总而言之，它是一个轻量级、完全响应的电子邮件，没有媒体查询，只有 17kb。

不是你要找的东西？没问题，本教程将教您如何构建自己的。

我们要构建的电子邮件模板

这是 CodePen 上的演示，向您展示我们将构建的响应式 HTML 电子邮件。随意分叉并在您自己的项目中使用它！

See the Pen Creating a Future-Proof Responsive Email Without Media Queries by Envato Tuts+ (@tutsplus) on CodePen.

模板中的所有图形元素都是来自 Envato Elements 上 alexdndz 的 Flat People Characters 集合的一部分。

我们旨在解决的 5 个主要问题

1. gmail 的应用仍然不支持<style>非 Gmail 帐户的标签

这是最大的。Gmail 应用程序在 ios 和 android 上广受欢迎，它可以设置为用户在任何智能手机上的默认邮件应用程序，并且支持所有非 Gmail 帐户。但是在 Gmail 应用程序中查看，非 Gmail 帐户的电子邮件不支持<style>标签，因此我们通常可以依靠媒体查询来优化我们的小屏幕电子邮件，但不支持。本教程将向您展示如何制作响应式电子邮件，即使在这种情况下也是如此。

2. 掌握电子邮件服务及其 CSS 支持水平真的很难

新的电子邮件提供商和应用程序一直在出现。其中一些具有出色的 CSS 和媒体查询支持，但其中一些更专注于电子邮件工作流程，根本不支持<style>标签或媒体查询。其中一些因平台而异——例如，适用于 iOS 的 Yahoo 邮件应用程序支持<style>头部，而在 Android 上则不支持，除非你包含整个<head> 两次，这在每个发送平台上都是不可能的。

本教程将向您展示如何制作始终响应的电子邮件，即使在不存在 CSS 支持的最坏情况下也是如此，因此您不必担心电子邮件在所有这些未知用例中的呈现方式。

float3. 在没有媒体查询支持的移动应用程序上，使用或创建列等传统方法align会导致难看的堆叠

本教程中的方法使用不同的方法，确保您的列在移动设备上都堆叠在中心，无论如何。（如果您愿意，也可以轻松地将它们设置为左对齐或右对齐。）

在没有媒体查询的情况下创建面向未来的响应式电子邮件第1张 — 左对齐或右对齐的表格在不支持媒体查询的移动应用程序中保持其位置。您无法使用特定于移动设备的 CSS 调整它们

在没有媒体查询的情况下创建面向未来的响应式电子邮件第2张 — 本教程将向您展示如何让您的列堆叠在中心，即使在不支持媒体查询的应用程序中也是如此

4.当你使用 float 或 align创建列时，你失去了垂直对齐它们的能力

本教程还将向您展示如何将多列垂直对齐到顶部、中间或底部。

在没有媒体查询的情况下创建面向未来的响应式电子邮件第3张 — 本教程将教您“流体混合”方法，该方法允许您将列垂直对齐到顶部、中间或底部

5. 使用 float or align创建列时，必须将它们放在单独div的s或table行中，这样它们在不同的屏幕尺寸下不能自然流动和堆叠

本教程还将向您展示如何让内容块按照您的预期堆叠和流动，并完全控制它们的水平和垂直对齐方式。

在没有媒体查询的情况下创建面向未来的响应式电子邮件第4张 — 使用这种方法，您的内容块会根据可用空间自然流动。

1.入门

从一个空白文件开始并将其保存为 index.html，然后将以下代码复制并粘贴到其中：

<!DOCTYPE html>

<head>

<!--[if mso]>

table {border-collapse:collapse;border:0;border-spacing:0;margin:0;}

div, td {padding:0;}

div {margin:0 !important;}

</style>

<xml>

<o:OfficeDocumentSettings>

<o:PixelsPerInch>96</o:PixelsPerInch>

</o:OfficeDocumentSettings>

</xml>

</noscript>

<![endif]-->

</head>

<tr>

[content goes here]

</td>

</tr>

</table>

</div>

</body>

</html>

让我们更详细地介绍上面的所有元素。

文档类型

<!DOCTYPE html>表示我们打算使用 html5。一些电子邮件客户端强制使用不同的文档类型，有些可能会删除它，但在大多数情况下，您最终会以一种或另一种方式使用 HTML5 文档类型。（请注意，并非所有 HTML5 元素在电子邮件方面都受支持，因此请务必首先在极好的资源caniemail.com上检查支持级别。）

HTML 标签

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">启动我们的 HTML 文档并定义我们在 Windows 上的 outlook 所需的 XML 和 OOXML（Office Open XML）命名空间，如下所示。

字符集元标记

视口元标记

苹果缩放元标记

IE9 元标记

标题标签

我们将包括在内<title></title>，尽管我发现最好将其留空。有时您会遇到一个应用程序或电子邮件发送平台，它会在收件箱预览中的电子邮件主题行之后立即显示此标题，这并不理想。

如果 MSO

接下来，有一些仅适用于 Microsoft Outlook 的样式。border-spacing:0;我们将使用（相当于cellspacing="0"在table元素上使用的 CSS）来防止表格上的间隙和单元格填充。div然后我们将所有元素的边距归零并使用!important，因为否则 Outlook 会为我们的布局添加大量额外的、不可预测的和不需要的空间。

XML 标记

然后我们有我们的 XML 标记，在里面我们有我们的 OOXML 元素<o:OfficeDocumentSettings>和一些设置，告诉 Microsoft Outlook 我们在 96dpi 的基本分辨率上运行。此设置可确保 Microsoft Outlook 始终准确地转换我们电子邮件中的所有内容，以适应在 Windows 设置中为高 DPI 显示器（目前大多数显示器）配置的屏幕缩放百分比。这都在一个<noscript>标签内，所以 T-Online 不会显示“96”（感谢Mark Robbins的修复。）

内联 CSS

你会注意到这里没有<style>标签。我们将内联所有 CSS，这仍然是电子邮件的最佳做法，直到 Gmail 应用程序中的非 Gmail 帐户停止删除<head>您的电子邮件。我们将在最后回来添加一些媒体查询，作为支持它们的客户端的增强功能。

带有基本样式的正文标签

<body style="margin:0;padding:0;word-spacing:normal;background-color:#ffffff;"> 在 body 标签上设置一些基本样式。最重要的是， Mark Robbinsword-spacing:normal的另一个拯救生命的修复，因为否则 Gmail 将字间距设置为 1px ，这会在我们的列之间增加 1px 的间隙并导致它们堆叠。body

包装器

<div role="article" aria-roledescription="email" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#ffffff;"> 是我们的外包装，也是基于Mark 的例子。它包含我们的主要内容，设置一些 CSS 以确保正确的文本大小，并将我们的语言设置为英语。它还包含一些设置，通过将主要电子邮件区域的角色定义为一篇文章，并稍微更具体地使用aria-roledescription="email". 这样屏幕阅读器就会宣布它是一封电子邮件，或者至少是一篇文章，它将其定义为主要内容并有助于导航。

虽然此布局将尽可能使用divs 而不是表格，但我们确实<table>在此处包含一个大包装器，以帮助我们将电子邮件的主体置于其中。这对于 Comcast webmail（美国）和 Libero webmail（意大利）来说尤其需要，如果没有它，它们都无法将我们的内容居中。我们应该始终将纯用于布局 role 的 any 设置为，这样屏幕阅读器就不会宣布行和列的存在和结构（这对实际的表格数据很有帮助），而只会宣布里面的内容。tablepresentation

2.创建结构外容器

首先，我们需要添加一个外部容器，它实际上是两个容器，因为我们一方面需要分别为 Windows 上的 Outlook 和所有其他电子邮件客户端提供服务。

这是因为我们的大部分电子邮件将使用<div>s创建，这些 smax-width在 CSS 中用于设置其尺寸，并display:inline-block;在 CSS 中用于并排放置多个列。不幸的是，Windows 上的 Microsoft Outlook 不能正确支持这些，所以我们需要使用一些老式的表格来保持它的快乐。不过，我们只希望这些限制性表格布局适用于 Outlook，因此我们将代码嵌套在条件[if mso]注释中，从而将其对其他电子邮件客户端隐藏。像这样为 Outlook 设置的任何表都称为幽灵表。

在没有媒体查询的情况下创建面向未来的响应式电子邮件第5张 — 我们需要 Windows 上的 Outlook 幻影表，因为它会忽略div宽度和位置。

因此，首先我们要添加一个 ghost table 和一个div共同组成一个包装器，该包装器以我们希望的宽度为这封电子邮件，660 像素。

在没有媒体查询的情况下创建面向未来的响应式电子邮件第6张 — 因为 Outlook 不支持 max-width 属性，所以使用了我们的 Outlook 幽灵表

[content goes here]用以下代码替换文件中的标记：

<!--[if mso]>

<tr>

<![endif]-->

[content goes here]

</div>

<!--[if mso]>

</td>

</tr>

</table>

<![endif]-->

在这里可以看到我们的ghost table是660px宽，div里面是96%宽，最大是660px。这意味着在较小的屏幕上，我们在两侧都有一个 2% 的小缓冲区，作为一点填充。

在没有媒体查询的情况下创建面向未来的响应式电子邮件第7张 — 我们的表格设置为 96% 宽，直到达到最大值 600px

这div也有 20px 的顶部和底部边距，给它一些垂直的呼吸空间，并且因为它不会在 Outlook 中呈现，我们也为幽灵表添加了顶部和底部填充td。

3.添加带有全宽横幅图像的单列布局

现在我们有了外部结构，是时候开始添加一些内容了。

如果您正在一步一步地学习，请立即停止下载教程文件并移动 /images 目录，使其与您的 index.html 文件位于同一文件夹中。您可以通过以下方式获取源文件：

访问 Github 存储库进行分叉
直接从 Github下载 .zip
访问 CodePen 上的演示以分叉它

如前所述，我们通常会偏爱divs 而不是表格，但对于单列布局，它使用较少的标记来为每个人只使用一个表格，而不是一个div带有幽灵表格的表格。所以让我们[content goes here]用这段代码替换：

<tr>

</td>

</tr>

<tr>

<h1 style="margin-top:0;margin-bottom:16px;font-family:Arial,sans-serif;font-size:26px;line-height:32px;font-weight:bold;">Creating responsive email magic</h1>

<p style="margin:0;font-family:Arial,sans-serif;font-size:18px;line-height:24px;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus!</p>

</td>

</tr>

</table>

在我们的第一行中，我们有一个侧面有 10px 填充的单元格，底部有一点额外的填充。在这个单元格内是我们的标题横幅图像它自己的行，因此有足够的空间用于任何 ALT 文本的大字体。（在我的例子中，这个图像纯粹是装饰性的，所以它不需要任何东西。）

我们width="640"在 Outlook 的 HTML 中设置图像，然后在我们设置的 CSS 中设置style="width:100%;height:auto;"图像在其他客户端中为 100% 宽，并且始终成比例。

在第二行中，我们将相同的 10px 内边距应用到侧面，并text-align:left;阻止文本在某些从td上面继承它的客户端中居中。

对于我们的文本，我们可以使用<h1>和<p>标签，因为margin这些标签全面支持（padding，不是那么多）。不过，我们确实将我们所有的样式内联应用于这些元素，因为某些 webmail 客户端具有字体样式，除非您在元素级别显式覆盖它，否则这些字体样式将被强制应用于它们。

在最底部，您可以看到我们正在使用间隔div器在此布局和下一个布局之间创建一些填充。我更喜欢在块之间使用这些，因为 Outlook 在块级元素上的边距可能非常难以预测，而且我发现在构建模块化布局时将间距保持为离散的代码段要容易得多。但是，如果您愿意，可以在元素内应用填充以创建垂直空间。当您确实想创建这样的间隔时，您只需设置 a line-height、 aheight和 setmso-line-height-rule:exactly; 这是 Microsoft Office 的一个属性，可防止它将您line-height视为最小值。

另请注意，在所有列的左侧和右侧应用相同的填充非常重要，这样当它们堆叠在一起时它们将是统一的。

在没有媒体查询的情况下创建面向未来的响应式电子邮件第8张 — 在元素的左侧和右侧始终具有相同数量的填充，以便在不支持媒体查询的客户端中移动设备上的填充是统一的

现在您应该准备好单列布局，让我们继续进行多列。

4.添加以移动为中心的两列布局

在没有媒体查询的情况下创建面向未来的响应式电子邮件第9张 — 我们将在桌面上创建一个两列布局，在移动设备上堆叠成一个居中的列

在上方间隔的结束标记正下方</div>，粘贴以下内容：

<!--[if mso]>

<tr>

<![endif]-->

[content goes here]

</div>

<!--[if mso]>

</td>

<![endif]-->

[content goes here]

</div>

<!--[if mso]>

</td>

</tr>

</table>

<![endif]-->

</div>

这为我们提供了一个非常基本的父级布局，div其中有两列，其中由 Outlook 的幽灵表支撑，其中包含两个单元格，每个单元格 50% 宽。

首先，我们要确保font-size容器上的设置为零，因为我们的列需要并排紧密地放置，如果没有这个，您最终可能会有额外的间距导致它们堆叠。我们还需要添加一个text-align属性来控制内部列的对齐方式。因此，将开始div标签更改为以下内容：

1	<div class="two-col" style="text-align:center;font-size:0;">

为了让里面的列在桌面上并排浮动，但在移动设备上堆叠在中心，我们将text-align: center容器 display: inline-block上的这种用法与列上的用法结合起来。

所有inline-block元素都遵循text-align其父级的属性，因此我们可以简单地设置left,center或right在容器上指定列在堆叠时应位于的位置。

在没有媒体查询的情况下创建面向未来的响应式电子邮件第10张 — 容器上设置的 text-align 将确定内部列的位置

让多个列工作

因此，让我们将display设置添加到每一列，并指定它们的宽度。我们希望它们在较小的屏幕上为 100% 宽，在桌面上最大为 330 像素。

更改每个div.column标签，使它们看起来像这样：

1	<div class="column" style="width:100%;max-width:330px;display:inline-block;">

现在一切都设置为多个列。

接下来我们要设置列的垂直对齐方式，您可以在顶部、中心和底部之间进行选择。当您有一个多行布局时，我们将在第 6 步中介绍，您的选择还将逐行设置垂直对齐，即使您的列堆叠到新行上也是如此。这很漂亮！

在没有媒体查询的情况下创建面向未来的响应式电子邮件第12张 — 列将与其邻居垂直对齐，即使它们堆叠到新行上

我们需要在两个地方为此添加一些代码。在我们的 column 上div，添加vertical-align:middle;到 CSS 中，它们看起来像这样：

1	<div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;">

对于 Outlook，我们也将 HTMLvalign属性添加到每个单元格。这始终必须与您在相应列上设置的任何内容相匹配div，因此如果您将列更改为，vertical-align:top;您还必须将所有幽灵表格单元格设置为valign="top"。

编辑幽灵表格单元格，如下所示：

1	<td style="width:50%;" valign="middle">

最后我们将添加一些填充。对于 Outlook，我们可以简单地将其添加到幽灵表格单元格中：

1	<td style="width:50%;padding:10px;" valign="middle">

对于我们的列，我实际上喜欢在div内部嵌套一个额外的填充。我这样做是因为 CSS 中的盒子模型意味着添加到元素的任何填充都会应用到外部，从而增加其总宽度（例如，330 像素的列，两侧有 10 像素的填充变为 350 像素宽）。通常在 HTML 中，您可以使用box-sizing: border-box;以便在宽度中包含任何填充，但它在电子邮件客户端中并没有得到很好的支持。因此，为了省去大量计算列宽减去填充的麻烦，我更喜欢嵌套。

所以在 each 里面 div.column，用这个替换 [content goes here] ：

123	<div style="padding:10px;"> [content goes here]</div>

现在我们都设置好了，我们的结构也完成了！布局和幽灵表一起为我们提供了两列布局。

在没有媒体查询的情况下创建面向未来的响应式电子邮件第13张 — 可视化我们的两列结构是如何工作的

配置流体混合图像

在第一列中，我们将添加一个我用段落标签包裹的图像（这样您可以在需要时轻松添加一些边距，这样任何 ALT 文本都会被很好地设置样式）。

用这个替换第一个 [content goes here] ：

<img

src="images/two-column-01.png" width="310"

alt="" style="display:block;width:310px;max-width:100%;height:auto;"

/></p>

让我们分解 img 上面的标签。

在这种情况下，我们有 310px 的可用空间（330px 列减去两侧 10px 的填充），所以我们的图像将是 310px 宽。首先，我们必须为 Windowswidth="310" 上的 img Outlook 设置标签，否则它将以其物理尺寸显示图像。

接下来，在 CSS 中，我们设置display:block;以防止 Gmail 和 Google Workspace 中的图片下方出现间隙。然后，为了确保图像在所有其他移动和桌面客户端中始终最大为列宽的 100%，我们将max-width:100%;. 我们还添加height:auto;以确保我们的图像永远不会被拉伸。

对于全角图像，您可以停在那里，但我还添加了一个 width:310px;以防您的图像较窄。如果是这样，请将310px值更改为图像的宽度，并确保您还调整了width="310"Outlook。

（您可能还注意到，在图像上，我们设置了像素宽度和百分比最大宽度，这与我们在列上所做的相反：它们具有百分比宽度和像素最大宽度。我'之所以进行此调整，是因为在 2021 年年中左右，适用于 iOS 和 Android 的 Outlook 应用程序停止支持img标签上的像素最大宽度。）

当您的图像较窄时，您可能还需要水平对齐它，这里有两个选项，具体取决于您的布局。

如果您不介意 Gmail 和 Google Workplace 中图片下方的空白，请从图片 display:block; 的 CSS 中删除。<p> 然后，在围绕它的标签的 CSS 中，简单地设置text-align 为任何你喜欢的。图像将从那里继承对齐方式。

或者，如果您在 Gmail 和 Google Workspace 中的图片下方不能有任何间隙，则必须保留 display:block; 并且您需要结合使用边距和对齐方式：

要左对齐 display:block 图像，请添加 margin-left:0;margin-right:auto; 到图像标签 CSS，并添加 align="left" 到其父幽灵表格单元格
要使 display:block 图像居中，请添加 margin-left:auto;margin-right:auto; 到图像标签 CSS，并添加 align="center" 到其父幽灵表格单元格
要右对齐 display:block 图像，请添加 margin-left:auto;margin-right:0; 到图像标签 CSS，并添加 align="right" 到其父幽灵表格单元格

请注意，Outlook 会将 align 设置应用于单元格中的所有内容，因此如果这不适合您的布局，您将需要调整 text-align 文本段落的设置。

现在我们只需要添加我们的文本

在第二列中， [content goes here] 用以下代码替换，其中包括几段文本和一个使用 Mark Robbins方法的链接按钮：

Taciti nostra, per litora nostra</p>

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque.</p>

<a href="https://example.com/"

style="background: #ffffff;

border: 2px solid #8dc1d6;

text-decoration: none;

padding: 10px 25px;

color: #000000;

border-radius: 4px;

display:inline-block;

mso-padding-alt:0;

text-underline-color:#ffffff">

<span style="mso-text-raise:10pt;font-weight:bold;">Claim yours now</span>

</a></p>

第二个div现在显示不可见的居中文本，因为它从容器继承了归零的字体大小和居中的文本对齐方式。所以我们将在div标签中添加一些字体大小和文本对齐，所以它现在看起来像这样：

Taciti nostra, per litora nostra

</p>

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque.

</p>

<a href="https://example.com/"

style="background: #ffffff; border: 2px solid #8dc1d6; text-decoration: none; padding: 10px 25px; color: #000000; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#ffffff">

<span style="mso-text-raise:10pt;font-weight:bold;">Claim yours now</span>

</a>

</p></div>

所有组合起来你的整个部分应该是这样的，我们也会在底部添加一个垫片：

<!--[if mso]>

<tr>

<![endif]-->

<img src="images/two-column-01.png" width="310" alt=""

style="display:block;width:310px;max-width:100%;height:auto;" />

</p>

</div>

<!--[if mso]>

</td>

<![endif]-->

Taciti nostra, per litora nostra</p>

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque.</p>

<span style="mso-text-raise:10pt;font-weight:bold;">Claim yours now</span>

</a></p>

</div>

</div> <div class="spacer" style="line-height:24px;height:24px;mso-line-height-rule:exactly;"> </div>

我们有它！现在你应该有一个两列布局，当你调整浏览器大小时垂直堆叠，当你使视口窄于 330px 时适当缩小。

5.添加在移动设备上堆叠时会反转的两列布局

现在我们将复制上面的布局，但将其翻转，以便在桌面上查看时图像在右侧，文本在左侧，同时确保在移动设备上查看时图像仍然排在第一位。

堆叠时，代码中最先出现的项目将始终位于顶部。所以我们仍然可以先用图像再用内容来编码布局，然后利用dir="rtl"HTML 中的属性和 CSS 中的相应direction:rtl;属性来确保列在并排出现时从右到左布局。

在没有媒体查询的情况下创建面向未来的响应式电子邮件第14张 — dir="rtl"如果(HTML) 或direction:rtl(CSS) 在其容器上设置，我们的元素将以相反的顺序堆叠

传统上，此属性用于表示具有从右到左运行的文本的语言，例如阿拉伯语。当应用于布局元素时，它将告诉每个电子邮件客户端以相反的顺序呈现我们的元素。我们总是为我们的div内容使用 CSS 版本，因为 GMX 和 Web.de 不支持 HTML dir 属性，但它们支持 directionCSS。

因此，在上面添加的分隔符下面，您可以再次复制并粘贴整个div.two-col内容，或者粘贴下面的代码，其结构相同但内容略有不同：

<!--[if mso]>

<tr>

<![endif]-->

<img src="images/two-column-02.png" width="310" alt=""

style="display:block;width:310px;max-width:100%;height:auto;" />

</p> </div> </div>

<!--[if mso]> </td> <td style="width:50%;padding:10px;" valign="middle">

<![endif]-->

Conubia nostra, per inceptos himenaeos</p>

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque.</p>

<a href="https://example.com/"

<!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:20pt"> </i>

<![endif]-->

</a></p> </div> </div>

</div>

现在我们需要做的就是告诉 ghost table 和 parentdiv以从右到左的方向布置它们的内容，所以添加direction:rtl;到 containerdiv的 CSS 中，它现在显示为：

1	<div class="two-col" style="text-align:center;font-size:0;direction:rtl;">

并添加dir="rtl"到 ghost 表：

1	<table role="presentation" width="100%" dir="rtl">

如果您现在保存并查看，您会看到列已切换到两侧，但文本看起来很奇怪。那是因为文本也继承了方向属性，所以我们需要在我们div的 s 和 ghost 表格单元格上重新设置它。首先，添加direction:ltr;到每一列div，所以它们现在看起来像这样：

1	<div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;direction:ltr;">

然后dir="ltr"到每个幽灵表格单元格：

1	<td style="width:50%;padding:10px;" valign="middle" dir="ltr">

现在我们的英文文本应该从左到右运行。

回顾一下，我们的整个行现在应该看起来像这样，我们还将在底部添加另一个垫片，如下所示：

<!--[if mso]> <table role="presentation" width="100%" dir="rtl"> <tr>

<!--[if mso]> </td> <td style="width:50%;padding:10px;" valign="middle" dir="ltr">

<![endif]-->

<p style="margin-top:0;margin-bottom:12px;font-family:Arial,sans-serif;font-weight:bold;">Conubia nostra, per inceptos himenaeos</p>

<p style="margin-top:0;margin-bottom:14px;font-family:Arial,sans-serif;">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque.</p>

</a></p> </div> </div>

</div> <div class="spacer" style="line-height:24px;height:24px;mso-line-height-rule:exactly;"> </div>

这就是它的全部！您现在已经创建了一个翻转的列布局，堆叠时会反转。

6.添加多行的三列布局

与我们的两列布局一样，这里我们将通过使用text-align: center容器和display: inline-block内部列的组合来创建在移动设备上堆叠在中心的列。

要实现多行多列，您可以根据需要将任意数量的内联块元素添加到单个容器中。这样，当视口变得太窄而无法容纳所有列时，它们会重新排列以适应可用空间。这意味着您能够（例如）实现 3x2 列布局，该布局在移动设备上堆叠为 2x3 列，最后是 1x6 列：

在没有媒体查询的情况下创建面向未来的响应式电子邮件第15张 — 我们的自由流动块可以堆叠从 3x2 到 2x3，再到 1x6

首先，我们这里的部分还有一个单列标题和介绍，所以我们先添加它。在第 3 步中，我们将只使用一个表，因为它使用的代码比创建一个div和一个 ghost 表要少。因此，在上面的垫片下方，粘贴以下内容

<tr>

<h1 style="margin-top:0;margin-bottom:12px;font-family:Arial,sans-serif;font-size:24px;line-height:28px;font-weight:bold;">Praesent laoreet malesuada cursus</h1>

<p style="margin:0;font-family:Arial,sans-serif;font-size:18px;line-height:24px;">Posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora!</p>

</td>

</tr>

</table>

在此之下，我们将添加我们的三列容器，以及我们的文本对齐设置：

[content goes here]

</div>

接下来，替换[content goes here]为以下幽灵表：

<!--[if mso]>

<tr>

<td>

<![endif]-->

<!--[if mso]>

</td>

<td>

<![endif]-->

<!--[if mso]>

</td>

<td>

<![endif]-->

<!--[if mso]>

</td>

</tr>

<tr>

<td>

<![endif]-->

<!--[if mso]>

</td>

<td>

<![endif]-->

<!--[if mso]>

</td>

<td>

<![endif]-->

<!--[if mso]>

</td>

</tr>

</table>

<![endif]-->

在上面的代码中要观察的主要内容是，在 ghost 表的中间，我们结束了表行并开始了一个新行，使用</td></tr><tr><td>. 您不需要分隔 divs 的行，但是您确实需要 <tr>为 Outlook 的幽灵表添加额外的 s，以便为您最终得到的每一列“行”。这实现了这样的布局：

在没有媒体查询的情况下创建面向未来的响应式电子邮件第16张 — 这就是我们的幽灵表在 Outlook 中的工作方式，以保持我们的行和列分开

对于此布局的其余部分，该过程几乎与我们在步骤 3 中看到的相同。唯一的区别是我们有三列，因此它们都设置为电子邮件宽度的三分之一，即 220 像素宽。而不是将幻影表格单元格设置为百分比，因为 Outlook 需要为 33%，这有点不精确，我们将其设置为每个单元格上的像素宽度。td用这个标记替换 ghost 表中的每个：

1	<td style="width:220px;padding:10px;" valign="top">

请注意，使用 CSS 而不是 HTML 在幻像表中设置像素单元格宽度始终是一个好主意，因为 Outlook 在调整 Windows 的 DPI 缩放时会准确地处理这些。如果您在 HTML 中设置单元格宽度，width="220"则可能会在 Windows 上的 Outlook 中出现不可预测的结果。

我们将为每个列匹配幽灵表格单元格格式，因此调整每个列div标签，使它们看起来像这样：

1	<div style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">

一旦应用到每一个，我们只需要添加我们的内部填充div、一些内容、我们的文本样式，并在下面放入一个空格。加上这一点，这一切都像这样聚集在一起：

<!--[if mso]>

<tr>

<![endif]-->

<p style="margin:0;font-family:Arial,sans-serif;">Scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.</p>

</div>

<!--[if mso]>

</td>

<![endif]-->

<p style="margin:0;font-family:Arial,sans-serif;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor.</p>

</div>

<!--[if mso]>

</td>

<![endif]-->

<p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.</p>

</div>

<!--[if mso]>

</td>

</tr>

<tr>

<![endif]-->

<p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.</p>

</div>

<!--[if mso]>

</td>

<![endif]-->

<p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.</p>

</div>

<!--[if mso]>

</td>

<![endif]-->

<p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.</p>

</div>

<!--[if mso]>

</td>

</tr>

</table>

<![endif]-->

</div>

就是这样！现在你应该有一个三列布局，它折叠成两列，最后在最小的屏幕上折叠成一列。

7.添加两列“侧边栏”布局

现在我们将创建一个布局，其中包含一个宽列和一个包含图标的较窄侧边栏。

div我们希望这些堆叠在中心，因此我们将使用该文本对齐设置我们的容器。将以下代码粘贴到最后一个分隔符下方：

[content goes here]

</div>

现在，[content goes here]用我们的 ghost table 和 column替换div。一个列是 100px 宽，另一个是 560px。

<!--[if mso]>

<tr>

<![endif]-->

[content goes here]

</div>

<!--[if mso]>

</td>

<![endif]-->

[content goes here]

</div>

<!--[if mso]>

</td>

</tr>

</table>

<![endif]-->

现在让我们通过添加valign到 ghost 表格单元格和vertical-align每个div. 我们较小的列代码将如下所示：

123	<td style="width:100px;" valign="middle"><![endif]--><div class="small" style="width:100%;max-width:100px;display:inline-block;vertical-align:middle;">

像这样的更广泛的：

<![endif]-->

现在我们将添加我们的填充并将我们的文本对齐到较小的幽灵表格单元格的中心：

1	<td style="width:100px;padding:10px;text-align:center;" valign="middle">

和更大的幽灵表格单元格：

1	<td style="width:560px;padding:10px;text-align:center;" valign="middle">

为了确保我们div的 s 匹配，div在每个内部嵌套另一个，用[content goes here]这个替换标记：

[content goes here]

</div>

现在我们可以添加我们的内容了。在小列上，替换[content goes here]为：

1	<img src="images/sidebar-01.png" width="80" alt="" style="width:80px;max-width:100%;height:auto;" />

并在大列上将其替换为：

<p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.

把它们放在一起，它应该看起来像这样。我还div为小列中的填充添加了一些字体样式，用于显示的任何 ALT 文本。我们还将在最后添加一个垫片：

<!--[if mso]>

<tr>

<![endif]-->

</div>

<!--[if mso]>

</td>

<![endif]-->

<p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. <a href="http://www.example.com/" style="color:#a16767;text-decoration:underline;"><strong>Read on</strong></a></p>

</div>

<!--[if mso]>

</td>

</tr>

</table>

<![endif]-->

</div>

现在您应该拥有左侧边栏布局，当您调整浏览器大小以使其更小时，图标将跳到文本上方并位于中心。

8.添加反向“侧边栏”布局

为了增加更多的视觉趣味，让我们反转我们的第二个侧边栏布局，使图标在桌面的右侧，但在移动设备上仍然首先堆叠。我们将遵循与第 5 步完全相同的过程。我们基本上可以复制上面的侧边栏布局，或者采用内容略有不同的示例布局：

<!--[if mso]>

<tr>

<![endif]-->

</div>

<!--[if mso]>

</td>

<![endif]-->

<p style="margin:0;font-family:Arial,sans-serif;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. <a href="http://www.example.com/" style="color:#a16767;text-decoration:underline;"><strong>Register today</strong></a></p>

</div>

<!--[if mso]>

</td>

</tr>

</table>

<![endif]-->

</div>

与第 5 步一样，要反转顺序，我们只需将我们的direction:rtl;todiv.sidebar和添加dir="rtl"到 ghost<table>标签。

然后，为了确保内容以正确的方向运行，我们将添加direction:ltr;到我们的两列以及dir="ltr"每个幽灵表格单元格中。

完成后，一切看起来像这样，我们在下面添加了最后一个垫片：

<!--[if mso]>

<tr>

<![endif]-->

</div>

<!--[if mso]>

</td>

<![endif]-->

</div>

<!--[if mso]>

</td>

</tr>

</table>

<![endif]-->

</div>

你有它！现在我们有两个带有图标的侧边栏，但是当所有内容在移动设备上堆叠时，它们仍然位于文本上方。

9.使用媒体查询添加渐进式增强

现在您拥有了一个完整的电子邮件模板，该模板在任何地方都可以响应，而无需看到单个媒体查询！但是当然有很多电子邮件客户端确实支持媒体查询，所以现在我们可以通过一些调整逐步增强我们已经很棒的模板，使其在尽可能多的电子邮件客户端中看起来一流。

添加媒体查询

首先，我们将我们的三列设置为 100% 宽，屏幕宽度不超过 350px，但是对于 351-460px 宽的屏幕，我们实际上可以并排放置两列，所以我们将设置他们到那里的50％。在列上，我们所要做的就是覆盖max-width因为，正如您所记得的，它们都已经具有 100% 的宽度，而这max-width正是限制它们的原因。

使用我们的两列列和图像，我们只需将它们在所有屏幕上设置为 100% 宽，最大为 460px 宽。

对于最小宽度为 461 像素的屏幕，我们将为max-width所有列指定百分比，这样即使视口或可视区域（例如 Gmail 网络邮件）比我们的电子邮件宽度窄，它们也会成比例660 像素。

因此，将其添加到<head>我们的文档中：

@media screen and (max-width: 350px) {

.three-col .column {

max-width: 100% !important;

}

@media screen and (min-width: 351px) and (max-width: 460px) {

.three-col .column {

max-width: 50% !important;

}

@media screen and (max-width: 460px) {

.two-col .column {

max-width: 100% !important;

}

.two-col img {

width: 100% !important;

}

@media screen and (min-width: 461px) {

.three-col .column {

max-width: 33.3% !important;

}

.two-col .column {

max-width: 50% !important;

}

.sidebar .small {

max-width: 16% !important;

}

.sidebar .large {

max-width: 84% !important;

}

</style>

瞧！每个屏幕尺寸的布局完美。

这些只是一些调整，以展示什么是可能的——您可以尽可能多地使用它，以在支持媒体查询的整个设备尺寸范围内实现您想要的结果。

你有它！

做得好！我们现在有了一个功能齐全的响应式 HTML 电子邮件，它只使用了少数媒体查询，并且大小不到 17kb。使用您在本教程中学到的原则继续尝试不同的布局 - 一旦您掌握了基础知识，您可以做很多事情。

文章目录

开发 html 电子邮件仍然很难吗？

不是你要找的东西？没问题，本教程将教您如何构建自己的。

我们要构建的电子邮件模板

我们旨在解决的 5 个主要问题

1. gmail 的应用仍然不支持<style>非 Gmail 帐户的标签
2. 掌握电子邮件服务及其 CSS 支持水平真的很难
float3. 在没有媒体查询支持的移动应用程序上，使用或创建列等传统方法align会导致难看的堆叠
4.当你使用 float 或 align创建列时，你失去了垂直对齐它们的能力
5. 使用 float or align创建列时，必须将它们放在单独div的s或table行中，这样它们在不同的屏幕尺寸下不能自然流动和堆叠

1.入门

文档类型
HTML 标签
字符集元标记
视口元标记
苹果缩放元标记
IE9 元标记
标题标签
如果 MSO
XML 标记
内联 CSS
带有基本样式的正文标签
包装器

2.创建结构外容器

3.添加带有全宽横幅图像的单列布局

4.添加以移动为中心的两列布局

让多个列工作
配置流体混合图像
现在我们只需要添加我们的文本

5.添加在移动设备上堆叠时会反转的两列布局

6.添加多行的三列布局

7.添加两列“侧边栏”布局

8.添加反向“侧边栏”布局

9.使用媒体查询添加渐进式增强

添加媒体查询

你有它！

开发 html 电子邮件仍然很难吗？

不是你要找的东西？没问题，本教程将教您如何构建自己的。

我们要构建的电子邮件模板

我们旨在解决的 5 个主要问题

1. gmail 的应用仍然不支持<style>非 Gmail 帐户的标签

2. 掌握电子邮件服务及其 CSS 支持水平真的很难

float3. 在没有媒体查询支持的移动应用程序上，使用或创建列等传统方法align会导致难看的堆叠

4.当你使用 float 或 align创建列时，你失去了垂直对齐它们的能力

5. 使用 float or align创建列时，必须将它们放在单独div的s或table行中，这样它们在不同的屏幕尺寸下不能自然流动和堆叠

1.入门

文档类型

HTML 标签

字符集元标记

视口元标记

苹果缩放元标记

IE9 元标记

标题标签

如果 MSO

XML 标记

内联 CSS

带有基本样式的正文标签

包装器

2.创建结构外容器

3.添加带有全宽横幅图像的单列布局

4.添加以移动为中心的两列布局

让多个列工作

配置流体混合图像

现在我们只需要添加我们的文本

5.添加在移动设备上堆叠时会反转的两列布局

6.添加多行的三列布局

7.添加两列“侧边栏”布局

8.添加反向“侧边栏”布局

9.使用媒体查询添加渐进式增强

添加媒体查询

你有它！

相关推荐

最新文章 | 热门文章 | 随机文章