编码所有电子邮件客户端的电子邮件

使用的编码方法：Hybrid / Spongy

div 不能在电子邮件中使用，这一直是一个神话。有一些电子邮件客户端（不像 outlook）可以正确地渲染 div。下面的示例将说明如何编码可以在 Gmail 应用程序（尚未推出更新），三星设备和其他不读取媒体查询的电子邮件客户端上运行的电子邮件。

介绍 Outlook 条件语句

Outlook 条件语句在呈现电子邮件或显示特定内容（如 Outlook 的后退）时非常有用。

<!--[if (gte mso 9)|(IE)]>
<![endif]-->

上面的代码读取大于 microsoft outlook 9 或 IE

Outlook 2000 - Version 9
Outlook 2002 - Version 10
Outlook 2003 - Version 11
Outlook 2007 - Version 12
Outlook 2010 - Version 14
Outlook 2013 - Version 15

列出的条件语句的版本。

启动混合电子邮件模板

每个步骤的解释方式都应该让具有基本 HTML 知识的任何人都能轻松理解。

首先，我们从一个包装表开始，它将跨越屏幕和一类容器。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>[CONTENT GOES HERE]</td>
    </tr>
  </tbody>
</table>

之后，我们为不读取最大宽度但读取标题中的 CSS 的电子邮件客户端添加媒体查询。媒体查询将以所有屏幕为目标，并以 700 像素宽度显示容器。

@media only screen and (max-width : 700px) {
.container{width:700px;}
}

接下来，我们添加一个 outlook 条件语句，使表（带有类容器）的宽度保持在 700 像素。

<!--[if (gte mso 9)|(IE)]>
    <table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td align="left" valign="top" width="700">
    <![endif]-->
    
        <table class="container" width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; max-width: 700px;">
              <tbody>
                <tr>
                  <td valign="top" bgcolor="#FFFFFF" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px;">[CONTENT GOES HERE]</td>
                </tr>
              </tbody>
        </table>

    <!--[if (gte mso 9)|(IE)]>
            </td>
        </tr>
    </table>
<![endif]-->

上面的代码现在应该在 outlook 中保存 700px 宽的模板。

现在为列。下面的代码将在模板上创建两个相等的列，宽度为 350px。

<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td align="left" valign="top" width="350">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>[COLUMN CONTENT HERE]</td>
    </tr>
  </tbody>
</table>
</div>
                                  
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="300">
<![endif]-->

<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>[COLUMN CONTENT HERE]</td>
    </tr>
  </tbody>
</table>
</div>

 <!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]-->

在此之后，限制只是你的想象力或设计师。设计完成后，重要的是参与线框架阶段，因此一旦设计处于编码阶段就没有意外。

注意：

• 视网膜图像需要在元素级别设置的图像而不是其样式<img src =“”width =“”…
• 你仍然可以选择进行内联 CSS，或者只有当所有客户端都支持 CSS 时才能选择 CSS。