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

最新推荐文章于 2021-06-10 16:13:28 发布

daique1908

最新推荐文章于 2021-06-10 16:13:28 发布

阅读量1.6k

点赞数

文章标签： java html css 人工智能 cocoa

媒体查询响应式

在编写HTML电子邮件时，有很多头痛需要解决。因此，如果我们还需要掌握每周都会弹出的新电子邮件客户端和设备大小，这似乎并不公平。 CSS和媒体查询支持因应用程序而异，因此每次听到有待测试的新型令人兴奋的邮件应用程序时，都无法避免被恐惧所消耗。

但是，即使您在对现代CSS的支持最差的环境中仍可以构建具有响应能力的电子邮件模板怎么办？如果每次您听到每个人都在尝试的某个新电子邮件应用程序，而不是害怕地颤抖，而又知道自己的电子邮件看起来很好，那又会感到安心又安全，该怎么办？

我在下面主张的方法是为没有媒体查询支持的电子邮件客户端创造良好的体验。

这称为流体混合方法，有时也称为电子邮件开发的海绵方法。流动部分指的是我们使用大量百分比的事实。混合部分是因为我们还使用max-width来限制某些元素在较大的屏幕上。

Envato市场上的流行HTML电子邮件模板

如果您正在寻找现成的专业解决方案，请在Envato Market上获取我们最畅销HTML电子邮件模板之一。我们提供数百种自适应选项，价格低至5美元，并且易于定制的功能可以帮助您入门。

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

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

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

我们要解决的六个主要问题

1. Gmail适用于Android和iOS的应用程序很痛苦

它比Android上的默认邮件应用程序更流行，但Gmail不支持媒体查询，传统上我们依靠媒体查询来调整电子邮件的大小和格式，以实现小屏幕显示。本教程将向您展示即使在Gmail应用程序中，也如何使电子邮件具有响应能力。

2.新的电子邮件应用程序一直在发布

跟踪所有不断出现的新邮件应用程序很困难。他们中的一些人真正关心电子邮件的呈现，并具有强大CSS和媒体查询支持，但其中一些人更多地专注于电子邮件工作流程，根本不支持媒体查询。本教程将向您展示无论CSS支持级别如何，电子邮件始终可以响应。

3.可能的设备屏幕尺寸几乎是无限的

我们不仅拥有大型台式机和微型智能手机，而且还拥有大型智能手机和微型笔记本电脑。仅仅因为有人通过笔记本电脑访问他们的Gmail并不意味着他们的屏幕足够大，无法查看700像素宽的电子邮件，并且使用iPhone 6+的用户可以处理两列的布局，但通常只停留在单个列中。本教程将向您展示如何进行布局调整，使其重新格式化以适应可用空间，即使在Webmail中也是如此。

4.在移动设备上通过堆叠`<td>`创建响应电子邮件并非在所有地方都有效

某些电子邮件客户端（在iOS上，甚至在Android早期版本上甚至是某些本机邮件应用程序）在同一行上均无法正确堆叠两个表格单元格；他们只会堆叠两个单独的表。本教程使用完全不同的方法，所有应用程序和设备都完全支持该方法。解决该问题的常用方法是使用具有align="left"或align="right"属性的表，但这会带来另一个陷阱：

5.使用响应式开发的对齐表方法时，您的表在不支持媒体查询的移动应用程序中左右对齐

本教程中的方法使用另一种方法，以确保您的所有列都堆叠在移动设备的中心位置，即使在Gmail应用程序中也是如此。（如果愿意，您也可以轻松地将它们设置为向左或向右对齐。）

6.使用响应式开发的对齐表方法时，将无法垂直对齐相邻列中的内容

本教程还将向您展示如何将同一行中的两列垂直对齐到顶部或中间，就好像它们都是同一行中所有使用valign属性的表单元格一样。

1.入门

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://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" />
	<!--[if !mso]><!-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<!--<![endif]-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<!--[if (gte mso 9)|(IE)]>
	<style type="text/css">
		table {border-collapse: collapse;}
	</style>
	<![endif]-->
</head>
<body>
	<center class="wrapper">
		<div class="webkit">
			[content goes here]
		</div>
	</center>
</body>
</html>

让我们快速遍历上面代码中的所有元素：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"是我最喜欢的DOCTYPE，我发现它产生的怪癖最少。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />使我们支持文档中的所有Unicode字符。

此处使用<meta http-equiv="X-UA-Compatible" content="IE=edge" /> ，以便Windows Phones可以正确显示我们的移动版本。它被隐藏在条件注释中，该条件注释将其从任何“ mso”（Microsoft Outlook）产品中隐藏起来，以防止使用此标记时Windows Live Mail无法显示图像的问题。（非常感谢Don Braithwaite提供此修复程序。）

我们将包含<title></title>尽管最好将其保留为空。有效的XHTML需要标题标签，但是某些本机Android邮件客户端会在收件箱预览中的预标题之前显示此标题。

您将看到本教程使用的是外部样式表，但是您可以采用这种方法。为了继续进行，您现在应该创建一个名为styles.css的新文档，并将其保存在与HTML文件相同的目录中。最后，我们将内联CSS。

接下来，在我们为Outlook提供了一些条件CSS，以强制其折叠所有表的边框并防止不必要的间隙。此条件表达式的目标是大于或等于版本9的所有Microsoft Outlook（mso）版本（因为版本9最早的版本为Outlook 2000，因此为所有版本）以及使用Internet Explorer呈现的Outlook版本（即Outlook） 2000–2003）。

在主体下面，首先我们有一个<center>标记，以使其内容居中并充当我们对一些有用的全局CSS属性的承载（因为body标记经常在Webmail客户端中被剥离）。对于具有早期版本的WebKit的邮件客户端（基本上仅是Apple Mail 6和更低版本，在某些情况下还包括Outlook 2011），我们还有<div class="webkit"> 。这些较早的版本仅在块级元素上支持max-width ，并且确保将布局显示为正确大小的最简单方法是将其包装在该div中，这省去了我们按照先前的方式在媒体查询中设置宽度的麻烦教程。（感谢您为此修补程序提供零美分。）

2.初始样式

接下来，创建一个名为styles.css的空白CSS文件。将以下内容粘贴到新创建的文件中：

/* Basics */
body {
    margin: 0 !important;
    padding: 0;
    background-color: #ffffff;
}
table {
    border-spacing: 0;
    font-family: sans-serif;
    color: #333333;
}
td {
    padding: 0;
}
img {
    border: 0;
}
div[style*="margin: 16px 0"] { 
    margin:0 !important;
}
.wrapper {
    width: 100%;
    table-layout: fixed;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
.webkit {
    max-width: 600px;
    margin: 0 auto;
}

在这里，我将对主体，表格和表格单元格的边距和填充进行归零，并将在链接的图像上出现的所有边界归零。主体页边距设置为!important以帮助解决Android KitKat上的对齐问题（有关更多信息，请参见下文）。我们设置背景颜色是因为，即使是纯白色，明确地这样做也是一个好主意，以避免在Outlook或Lotus Notes中出现背景颜色故障。

table和td标签的样式将代替cellpadding和cellspacing HTML属性。如果您更愿意使用HTML属性，则完全由您决定；过去，我一直都支持在可能的情况下使用HTML属性而不是CSS属性，但是当我从事越来越多的大型项目时，我发现在CSS中指定这些属性更容易管理，尤其是如果您通常在自动为您处理CSS内联的平台中工作。

div[style*="margin: 16px 0"]规则与!important结合使用，可在Android 4.4的本机邮件客户端中将某些多余的填充归零。您可以在James White的博客上了解有关此问题的更多信息，他在博客中解释了这一巧妙的修复方法。

.wrapper还有一些样式，具有一些属性，可在Windows Phones和iOS上以怪异的方式停止调整文本大小以及table-layout: fixed以确保我们居中的内容实际上将在Yahoo邮件中居中。我们在名为的div上设置了600px的max-width 。用于包含Apple Mail 6（及更低版本）和Outlook 2011中所有内容的webkit ，并将其0 auto margin为0 auto以便它也将在Yahoo Mail中居中。

3.创建结构外部容器

我们将从此方法的关键构建块之一开始：Outlook的条件表，该表已被所有其他客户端隐藏。我们需要这些，因为我们将使用Outlook不支持的max-width属性。因此，我们需要创建具有显式像素宽度的特殊的仅Outlook表格，以包含Outlook中的所有内容。

因此，在我们HTML文件中，让我们删除[content goes here]占位符，然后粘贴以下代码。为了易于阅读，我倾向于将所有条件代码标签都保持在同一缩进级别左对齐，但是如何格式化它们取决于您自己。

<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center">
<tr>
<td>
<![endif]-->
<table class="outer" align="center">
<tr>
		<td>
			[content goes here]
		</td>
	</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->

注意：我的条件表标签上没有样式。我将使用Campaign Monitor的内联工具inliner.cm ，该工具还将样式内联到条件表中。如果要使用其他衬板，则它可能不会这样做，因此请确保将cellpadding="0" cellspacing="0" border="0"到条件Outlook表中。

在条件表中，您会看到我们有一个<table class="outer"> ，这是除Outlook外的每个客户端的关键外部构件。

在小屏幕上，我们希望此外部表的宽度为100％，但在大屏幕上，我们仅希望其最大宽度为600px。因此，我们将其宽度设置为100％，并为其提供600px的最大宽度。

实用提示：要在移动设备上快速轻松地缓冲数据，而又不必摆弄填充或媒体查询，请将表格的width从100％更改为95％。

因此，让我们将这些样式粘贴到我们的styles.css文件中：

.outer {
Margin: 0 auto;
	width: 100%;
	max-width: 600px;
}

我们还有Margin: 0 auto; 在此处将表格设置为在Chrome的Yahoo中居中。尽管出于雅虎的目的使用保证金，但我始终将Margin设为大写，以便Outlook.com不会将其删除—感谢Wiktor在此博客文章中的评论，这是一个巧妙的小技巧。

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

4.添加全角横幅图像

首先，下载教程文件并移动/ images目录，使其与index.html文件位于同一文件夹中。

现在，让我们在.outer表中的td添加一幅full-width-image类，然后将我们的[content here here]占位符替换为image标签，以便使整个表看起来像这样：

<table class="outer" align="center">
	<tr>
		<td class="full-width-image">
			<img src="images/header.jpg" width="600" alt="" />
		</td>
	</tr>
</table>

我们已经在HTML中为图像指定了像素宽度，以便Outlook可以正确显示它，但是我们将在CSS中使用100％的宽度覆盖它，以便在其他客户端中自由调整大小：

.full-width-image img {
	width: 100%;
	max-width: 600px;
	height: auto;
}

我们还设置了最大宽度以匹配我们在HTML中设置的像素宽度（600像素），因为当最大宽度也设置为100％时Windows Phone播放效果不佳。我们将高度设置为自动以确保我们的图像不会在任何地方出现错误的宽高比。（非常感谢Courtney Fantinato ，他开发了这种出色的方法来将高分辨率图像与流体混合方法一起使用。）

现在，您可以预览HTML文件，并查看图像如何根据视口的大小流畅地调整大小。

5.添加单列布局

使用此标记将另一行添加到.outer表：

<tr>
<td class="one-column">
		<table width="100%">
			<tr>
				<td class="inner contents">
					<p class="h1">Lorem ipsum dolor sit amet</p>
					<p>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. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.</p>
				</td>
			</tr>
		</table>
	</td>
</tr>

并将此样式添加到您CSS文件中：

.inner {
padding: 10px;
}
p {
	Margin: 0;
}
a {
	color: #ee6a56;
	text-decoration: underline;
}
.h1 {
	font-size: 21px;
	font-weight: bold;
	Margin-bottom: 18px;
}
.h2 {
	font-size: 18px;
	font-weight: bold;
	Margin-bottom: 12px;
}

/* One column layout */
.one-column .contents {
	text-align: left;
}
.one-column p {
	font-size: 14px;
	Margin-bottom: 10px;
}

您会注意到，我使用了<p>标记和一组样式来设置它们的样式。我喜欢使用段落来设置文本的样式，由于前面提到的大写M Margin hack，您实际上可以非常轻松地管理它们。我还使用<p class="h1">代替了<h1>因为Outlook.com具有某些h1，h2和h3样式，这些样式始终会覆盖您的样式。

因此，在上面CSS中，我们为列设置了10px填充，我们重置了<p>上的所有边距，为链接以及.h1和.h2类设置了一些基本样式，然后确保了我们列的内容与样式段落左对齐。

现在进入令人兴奋的东西..多列！

6.添加两列布局*

*堆叠时将居中。

首先将此新行添加到.outer表。它包含一个具有.two-column类的单元格，并且在其中包含一个Outlook的条件表，该表具有两个50％宽的列：

<tr>
<td class="two-column">
		<!--[if (gte mso 9)|(IE)]>
		<table width="100%">
		<tr>
		<td width="50%" valign="top">
		<![endif]-->
		[column to go here]
		<!--[if (gte mso 9)|(IE)]>
		</td><td width="50%" valign="top">
		<![endif]-->
		[column to go here]
		<!--[if (gte mso 9)|(IE)]>
		</td>
		</tr>
		</table>
		<![endif]-->
	</td>
</tr>

这些条件列很重要，因为没有它们，Outlook不会让我们的两个浮动表并排摆放整齐。由于Outlook也不支持max-width ，因此这些列有助于将每个列限制为正确的大小。

现在，将每个[column to go here]占位符替换为：

<div class="column">
<table width="100%">
		<tr>
			<td class="inner">
				[content goes here]
			</td>
		</tr>
	</table>
</div>

我们将使两列在桌面上并排浮动，但在移动设备上居中堆叠的方式是结合使用text-align: center和display: inline-block 。所有内联和内联块元素都遵循text-align属性。因此，如果我们将表包装在设置为inline-block的div中，则可以通过在容器上设置text-align属性来很容易地设置它们在对齐时的对齐方式。您可以选择左对齐，居中对齐或右对齐，并且内联块div将服从。实际上，您可以简单地将表本身设置为display: inline-block ，但前提是您不打算在其中嵌套更多表。如果将表嵌套在内联块表中，事情就会开始变得怪异，因此，如果需要嵌套，请始终确保内联块容器是div。

让我们用我们选择的对齐方式设置容器单元.two-column的样式。我们还将添加font-size: 0来消除此单元格内各列之间的任何间隙。

/*Two column layout*/
.two-column {
text-align: center;
	font-size: 0;
}

现在，我们将设置作为行的内联块div样式：

.two-column .column {
width: 100%;
	max-width: 300px;
	display: inline-block;
	vertical-align: top;
}

我们使用的宽度为100％，最大宽度为300px，因此在小于300px的视口中，此特定列的宽度为100％。

您可以将自己的vertical-align方式设置为任意值：顶部，中心或底部。将vertical-align设置为top意味着每列使用HTML属性valign="top"好像它是一个表格单元格，而将其设置为middle则好像它具有valign="middle" 。请注意，您可以在同一单元格中包含这些div的许多行，并且垂直对齐将始终以逐行为基础指示垂直对齐。真漂亮！另外，请确保您在此处选择的任何内容都与您在Outlook条件表上设置的valign相匹配，因为Outlook不支持vertical-align 。如果您在Outlook中的对齐方式不匹配，通常会忘记在条件表上设置valign 。

接下来，我们将向每列添加一个包含两行的表。这样一来，当所有内容堆叠在移动设备上时，每个图像的直接下方都有其对应的文本。

因此，我们将以下两个[content goes here]占位符替换为：

<table class="contents">
	<tr>
			<td>
					<img src="images/two-column-01.jpg" width="280" alt="" />
			</td>
	</tr>
	<tr>
			<td class="text">
					Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
			</td>
	</tr>
</table>

每列的宽度为300px，两侧各有10px的填充，因此图像保留280px。

接下来，我们将为.contents类设置100％的宽度：

.contents {
width: 100%;
}

然后，让我们在两列布局下添加样式，以设置字体大小和文本对齐方式，确保图像以100％的宽度显示，并在下方填充一些文字：

.two-column .contents {
font-size: 14px;
	text-align: left;
}
.two-column img {
	width: 100%;
	max-width: 280px;
	height: auto;
}
.two-column .text {
	padding-top: 10px;
}

现在，您应该具有一个两列的布局，当您调整浏览器的大小时，它会垂直堆叠，而当您将视口缩小到小于300px时，它会适当缩小。

7.添加三列布局

再次，我们将通过使用text-align: center和display: inline-block的组合来创建在移动设备上堆叠的并text-align: center 。

我们将使用text-align: center以便我们的列堆叠在中间，但是您也可以始终使用左或右文本对齐方式。这是一个中心和左对齐元素如何堆叠的示例：

因此，我们将在另一列中重复两列过程。将此新行添加到.outer表。（通常，我更喜欢对条件Outlook表中的单元格使用百分比宽度，但是在这种情况下，将每个单元格的宽度设置为200更容易。）

<tr>
<td class="three-column">
		<!--[if (gte mso 9)|(IE)]>
		<table width="100%">
		<tr>
		<td width="200" valign="top">
		<![endif]-->
		[column to go here]
		<!--[if (gte mso 9)|(IE)]>
		</td><td width="200" valign="top">
		<![endif]-->
		[column to go here]
		<!--[if (gte mso 9)|(IE)]>
		</td><td width="200" valign="top">
		<![endif]-->
		[column to go here]
		<!--[if (gte mso 9)|(IE)]>
		</td>
		</tr>
		</table>
		<![endif]-->
	</td>
</tr>

现在添加以下CSS，为该行添加一些额外的填充，并设置我们在两列布局中使用的所有属性，以使我们的列按照我们希望的方式运行。它还将为我们将要添加的div列设置样式，在本例中为200px宽。

/*Three column layout*/
.three-column {
	text-align: center;
	font-size: 0;
	padding-top: 10px;
	padding-bottom: 10px;
}
.three-column .column {
	width: 100%;
	max-width: 200px;
	display: inline-block;
	vertical-align: top;
}
.three-column .contents {
	font-size: 14px;
	text-align: center;
}
.three-column img {
	width: 100%;
	max-width: 180px;
	height: auto;
}
.three-column .text {
	padding-top: 10px;
}

现在，通过将[column to go here]占位符分别替换为一个div [column to go here]插入列：

<div class="column">
    <table width="100%">
        <tr>
            <td class="inner">
                <table class="contents">
                    <tr>
                        <td>
                            <img src="images/three-column-01.jpg" width="180" alt="" />
                        </td>
                    </tr>
                    <tr>
                        <td class="text">
                            Scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

就是这样！现在，您应该具有三列布局，其中列将堆叠在较窄的视口上。

由于此布局的列数不均匀，因此有时您会发现自己的第一行显示两列，而下面仅显示一列。尽管我认为如果针对这种情况进行设计，确实可以使外观看起来很棒，但有时看起来会有些不平衡。解决此问题的最佳方法通常是使用左对齐或使用三列的多行，以便当内容以中型分辨率堆叠时，每行仍然有偶数列。

添加具有多行的三列布局

当您想在多列布局中添加更多行时，可以根据需要向单个容器单元中添加尽可能多的行内块元素。这样，当视口变得太窄而无法容纳所有列时，它们会简单地重排以适应可用空间。

虽然不需要为大多数客户端分隔div的行，但是您确实需要向Outlook的条件表中添加其他<tr> 。

让我们通过在.outer表中以.three-column类开始新行来进行尝试。在这里，我们有一个新的三列行，里面有一个条件表。您将看到条件表中有三列，然后以</tr>结尾条件表的行，并打开一个新的<tr> ，其中包含另外三个200px宽的单元格。

<tr>
<td class="three-column">
		<!--[if (gte mso 9)|(IE)]>
		<table width="100%">
		<tr>
		<td width="200" valign="top">
		<![endif]-->
		[column to go here]
		<!--[if (gte mso 9)|(IE)]>
		</td><td width="200" valign="top">
		<![endif]-->
		[column to go here]
		<!--[if (gte mso 9)|(IE)]>
		</td><td width="200" valign="top">
		<![endif]-->
		[column to go here]
		<!--[if (gte mso 9)|(IE)]>
		</td>
		</tr>
		<tr>
		<td width="200" valign="top">
		<![endif]-->
		[column to go here]
		<!--[if (gte mso 9)|(IE)]>
		</td><td width="200" valign="top">
		<![endif]-->
		[column to go here]
		<!--[if (gte mso 9)|(IE)]>
		</td><td width="200" valign="top">
		<![endif]-->
		[column to go here]
		<!--[if (gte mso 9)|(IE)]>
		</td>
		</tr>
		</table>
		<![endif]-->
	</td>
</tr>

接下来，我们将向每个条件单元格添加这样的div，以替换[column to go here]占位符：

<div class="column">
    <table width="100%">
        <tr>
            <td class="inner contents">
                <p class="h2">Heading</p>
                <p>Class eleifend aptent taciti sociosqu ad litora torquent conubia</p>
                <p><a href="#">Read more</a></p>
            </td>
        </tr>
    </table>
</div>

现在，如果您调整窗口大小，您将再次看到这些列堆叠起来以填充可用空间。三列将减少为三行的两列，直到它们最终折叠为六行的单列。

添加更多列

在本教程中，我们将不再添加任何多列布局，但是您可以随意在布局中拥有任意多的列。您需要做的就是确保所有内容块加起来等于容器的宽度，并且Outlook的条件表具有正确的单元格和包含它们的行数。

8.添加一个两栏的“侧边栏”布局

接下来，我们将创建两列布局，其中列宽为500px，图标的边栏宽度为100px。

首先，我们将添加带有.left-sidebar类的行和单元格，并在其中弹出Outlook的条件表，该表具有单行和两行不均匀的列：

<tr>
<td class="left-sidebar">
		<!--[if (gte mso 9)|(IE)]>
		<table width="100%">
		<tr>
		<td width="100">
		<![endif]-->
		[column to go here]
		<!--[if (gte mso 9)|(IE)]>
		</td><td width="500">
		<![endif]-->
		[column to go here]
		<!--[if (gte mso 9)|(IE)]>
		</td>
		</tr>
		</table>
		<![endif]-->
	</td>
</tr>

然后在每一列中，替换[column to go here]占位符，我们将添加一个div。这次我们将称呼一个.column .left和一个.column .right因为它们的宽度不同。

注意：这里我在单个元素上使用多个类。某些内联工具和/或ESP可能不支持这样做，因此请首先与您的系统或平台联系。如上所述，我使用inliner.cm内联CSS，它确实支持多个类。

在第一列中，添加包含我们的图标的左侧div：

<div class="column left">
    <table width="100%">
        <tr>
            <td class="inner">
                <img src="images/sidebar-01.jpg" width="80" alt="" />
            </td>
        </tr>
    </table>
</div>

然后在第二列中，在右侧div中添加文本和链接：

<div class="column right">
    <table width="100%">
        <tr>
            <td class="inner contents">
                Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. <a href="#">Read&nbsp;on</a>
            </td>
        </tr>
    </table>
</div>

接下来，让我们对容器进行样式设置并设置列：

/* Left sidebar layout */
.left-sidebar {
text-align: center;
	font-size: 0;
}
.left-sidebar .column {
	width: 100%;
	display: inline-block;
	vertical-align: middle;
}
.left-sidebar .left {
	max-width: 100px;
}
.left-sidebar .right {
	max-width: 500px;
}
.left-sidebar .img {
	width: 100%;
	max-width: 80px;
	height: auto;
}

最后，让我们设置一些文本样式和链接颜色：

.left-sidebar .contents {
font-size: 14px;
	text-align: center;
}
.left-sidebar a {
	color: #85ab70;
}

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

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

现在我们要复制侧边栏布局，这一次我们希望图标位于右侧以在桌面上创建一些视觉效果。但是在移动设备上，我们希望内容按与以前的侧边栏布局完全相同的顺序堆叠，以便图标位于文本顶部。

首先，我们将使用.left-sidebar单元格复制并粘贴整行，唯一要做的更改是将容器单元格的类从.left-sidebar更改为.right-sidebar ：

<tr>
    <td class="right-sidebar">
        <!--[if (gte mso 9)|(IE)]>
        <table width="100%">
        <tr>
        <td width="100">
        <![endif]-->
        <div class="column left">
            <table width="100%">
                <tr>
                    <td class="inner contents">
                        <img src="images/sidebar-02.jpg" width="80" alt="" />
                    </td>
                </tr>
            </table>
        </div>
        <!--[if (gte mso 9)|(IE)]>
        </td><td width="500">
        <![endif]-->
        <div class="column right">
            <table width="100%">
                <tr>
                    <td class="inner contents">
                        Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. <a href="#">Per&nbsp;inceptos</a>
                    </td>
                </tr>
            </table>
        </div>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        </table>
        <![endif]-->
    </td>
</tr>

绝对其他所有内容都完全相同。

我们要做的是使用dir="rtl" （意思是从右到左的方向）来发挥我们的优势。此属性用于表示从右到左运行的字母，例如阿拉伯语。但是在我们的例子中，只是告诉每个电子邮件客户端以相反的顺序渲染元素。

首先，需要向容器（ .right-sidebar ）添加dir="rtl" 。这告诉它从右到左在内部渲染浮动列。因此，我们的开始标记现在应如下所示：

<td class="right-sidebar" dir="rtl">

然后，在Outlook条件代码中，我们还需要将dir="rtl"添加到<table>因为我们告诉该表以相反的顺序呈现<td> 。

因此，我们的开放条件注释现在应如下所示：

<!--[if (gte mso 9)|(IE)]>
<table width="100%" dir="rtl">
<tr>
<td width="100">
<![endif]-->

最后，我们需要在.column-left和.column-right div中添加dir="ltr" ，因为它们内部包含内容，并且由于该内容是英文，因此需要从左到右运行。如果我们不对这些元素进行设置，它们将从其父元素继承从右到左的方向。

现在，我们的.column-left应该如下所示：

<div class="column left" dir="ltr">
    <table width="100%">
        <tr>
            <td class="inner contents">
                <img src="images/sidebar-02.jpg" width="80" alt="" />
            </td>
        </tr>
    </table>
</div>

现在，我们的.column-right应该如下所示：

<div class="column right" dir="ltr">
    <table width="100%">
        <tr>
            <td class="inner contents">
                Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. <a href="#">Per&nbsp;inceptos</a>
            </td>
        </tr>
    </table>
</div>

回顾一下，现在我们的整个行应如下所示：

<tr>
    <td class="right-sidebar" dir="rtl">
        <!--[if (gte mso 9)|(IE)]>
        <table width="100%" dir="rtl">
        <tr>
        <td width="100">
        <![endif]-->
        <div class="column left" dir="ltr">
            <table width="100%">
                <tr>
                    <td class="inner contents">
                        <img src="images/sidebar-02.jpg" width="80" alt="" />
                    </td>
                </tr>
            </table>
        </div>
        <!--[if (gte mso 9)|(IE)]>
        </td><td width="500">
        <![endif]-->
        <div class="column right" dir="ltr">
            <table width="100%">
                <tr>
                    <td class="inner contents">
                        Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. <a href="#">Per&nbsp;inceptos</a>
                    </td>
                </tr>
            </table>
        </div>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        </table>
        <![endif]-->
    </td>
</tr>

最后，让我们添加样式，所有样式与.left-sidebar完全相同，除了链接颜色：

/* Right sidebar layout */
.right-sidebar {
text-align: center;
	font-size: 0;
}
.right-sidebar .column {
	width: 100%;
	display: inline-block;
	vertical-align: middle;
}
.right-sidebar .left {
	max-width: 100px;
}
.right-sidebar .right {
	max-width: 500px;
}
.right-sidebar .img {
	width: 100%;
	max-width: 80px;
	height: auto;
}
.right-sidebar .contents {
	font-size: 14px;
	text-align: center;
}
.right-sidebar a {
	color: #70bbd9;
}

好了！因此，现在我们在相对的两侧都有两个侧边栏，但是当所有内容在移动设备上堆叠时，两个侧边栏都显示在文本上方。

10.通过媒体查询添加渐进增强

现在，您拥有了一个完整的电子邮件模板，该模板可以在任何地方响应，而看不到单个媒体查询！但是当然，有很多电子邮件客户端确实支持媒体查询，因此现在我们可以通过一些调整逐步增强我们本来就很不错的模板，以使所有内容在iOS Mail这样的客户端中看起来都很漂亮。

首先，对于所有不超过400像素的内容，我们将使所有列都以视口宽度的100％出现。我们还将三列图像的宽度限制为50％，以便它们不会爆炸得太大，并且我们将覆盖两列图像的像素max-width ，以使它们占据整个视口。在列上，我们要做的就是覆盖最大宽度，因为您会记得，它们都已经具有100％ max-width ，而max-width限制了它们。

因此，将其添加到您CSS文件中：

/*Media Queries*/
@media screen and (max-width: 400px) {
.two-column .column,
	.three-column .column {
		max-width: 100% !important;
	}
	.two-column img {
		max-width: 100% !important;
	}
	.three-column img {
		max-width: 50% !important;
	}
}

然后，在401px和600px宽之间添加以下内容，以使两列和三列布局与在桌面上一样，但缩小以适合。

@media screen and (min-width: 401px) and (max-width: 620px) {
.three-column .column {
		max-width: 33% !important;
	}
	.two-column .column {
		max-width: 50% !important;
	}
}

这些是相当随意的调整，以展示出可能的结果—您可以随意摆弄和尝试这一操作，以在支持媒体查询的整个设备尺寸范围内实现所需的结果。

11.内联代码

如果您的电子邮件发送平台不适合您进行内联，则需要手动进行。首先，删除文档<head>中的链接标记<link rel="stylesheet" type="text/css" href="styles.css" />并将其替换为<style type="text/css"> 。复制style.css的内容并将其粘贴在下面，然后使用</style>关闭style标签。最后，将整个文件复制并粘贴到inliner.cm的框中，然后等待结果。处理后，立即将内容复制到包装盒中，即可开始使用！

在那里，您拥有它！

做得好！现在，我们有了使用少于二十行媒体查询的功能齐全的响应HTML电子邮件。

最后的注意事项和提示

通过这种电子邮件开发方法，我发现简单和统一是关键。当您在不同的列上使用不同的填充时，事情开始变得一发不可收拾。在本教程中，您会注意到，我在.inner类上的填充间距保持为10px，适用于每个单独的布局。这很重要，因为当所有内容堆叠在移动设备上时，您都希望填充是统一的。

有时您可能需要向外计算，以根据最佳的统一填充值确定布局的外部宽度，而不是确定外部宽度，然后再向内工作。
使用这种方法在浏览器中进行设计通常是一个好主意，因为对某些设计进行改造以使用此方法通常会是一个很大的挑战。
使用这种方法时，开始设计比平常宽得多的电子邮件是非常安全的，因为您知道布局将重新排列以适合较小的视口，即使在Webmail中也是如此。唯一的问题是Outlook，它仍然需要那些条件表，以便所有内容都可以正确显示，因此Outlook用户将始终在最大范围内查看整个电子邮件。即使您仍然需要牢记最低的公分母，但肯定还有一定的空间可以超越通常在电子邮件中设置的通常的550-600px限制。

图标

再次感谢Pierre Borodin提供了我的教程中使用的所有图标。

附录：iOS9 iPad Mail App错误

随着iOS9的发布，Apple似乎在iPad上的Mail应用程序中重新引入了一个旧的WebKit错误。如果HTML标记中的两个元素之间有空白，则该错误有时会导致内联块元素之间出现间隙。

注意：本教程中的代码不受影响，但是如果您更改它或在另一个模板中使用这些方法，则可能会遇到此错误。

解决该问题的一种方法是在列容器中保留一些备用像素，以免任何小间隙都不会导致列堆叠。

另一种解决方案是简单地摆脱HTML中<div>标记之间的任何空白。您将调整以下代码：

<!--[if (gte mso 9)|(IE)]><table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="column">
    [content]
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%">
<![endif]-->
<div class="column">
	[content]
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->

并将其更改为此：

<!--[if (gte mso 9)|(IE)]><table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="column">
    [content]
</div><!--[if (gte mso 9)|(IE)]></td><td width="50%"><![endif]--><div class="column">
	[content]
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->

如您所见，第一个<div>标记的关闭，Outlook的条件代码以及下一个<div>标记的打开都在同一行上，它们之间没有空格。这将阻止在iPad上的iOS9 Mail中呈现任何空白。

感谢RémiParmentier解决问题！

并且不要忘记，如果您要启动一个新项目，请在Envato Market上浏览我们最畅销的响应电子邮件模板。