html - 尝试使用 Zurb Foundation 使电子邮件在响应列点折叠

Question

我正在尝试让这封电子邮件在移动设备和桌面设备上都具有响应性。当我在 Gmail 移动应用程序上对此进行测试时，电子邮件不会折叠。这些列包含 6 x 6 网格，而不是每个列都有 12 个网格。谁能帮我弄清楚问题出在哪里？我已经使用 Zurb inliner 内联了我的 CSS。但网格未折叠的问题仍然存在。

也有人可以让我知道他们会推荐的电子邮件测试器，以在开发过程中测试响应式电子邮件。

这是 Codepen 上电子邮件模板的链接

http://codepen.io/anon/pen/JEBVWK

下面是其中一列的示例，在小的时候应该是 12 列宽，在大的时候应该是 6 x 6 列，但即使在 Gmail 应用程序中也应该并排保持 2 x 6 列

<table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: table; padding: 0;">
    <tbody>
        <tr align="left" style="vertical-align: top; text-align: left; padding: 0;">
            <th align="left" class="small-12 large-6 columns" style="width: 274px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-weight: normal; text-align: left; line-height: 1.3; font-size: 16px; margin: 0 auto; padding: 0 8px 16px 16px;">
                <ul class="disc">
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales sapien aliquam arcu egestas dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales</li>
                </ul>
                <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; padding: 0;">
                    <tr align="left" style="vertical-align: top; text-align: left; padding: 0;">
                        <td></td>
                    </tr>
                </table>
            </th>
            <th align="left" class="small-12 large-6 columns last" style="width: 274px; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-weight: normal; text-align: left; line-height: 1.3; font-size: 16px; margin: 0 auto; padding: 0 16px 16px 8px;">
                <ul class="disc">
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales sapien aliquam arcu egestas dignissim.</li>
                </ul>
                <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; padding: 0;">
                    <tr align="left" style="vertical-align: top; text-align: left; padding: 0;">
                        <td></td>
                    </tr>
                </table>
            </th>
        </tr>
    </tbody>
</table>

Answer 1

我发现 Zurb 模板也很烦人。您使用的模板是在混合前期构建的。该代码严重依赖于仅适用于 iOS 和 Android 4.4 及以下版本的媒体查询。尝试编码的混合方法。如果您还没有听说过混合，它是唯一允许所有设备显示电子邮件响应版本(甚至是 Gmail、Gmail 应用程序和三星设备)的方法。

我编写了一个分步方法(最初在 SO 文档中，现在如下所示)，您可以立即使用它来构建自己的模板。如果标题中有 CSS，则可以在线使用内联网站来内联 CSS。如果您需要我以任何方式帮助创建完整模板，请告诉我。

---

使用的编码方法: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>

之后，我们为不读取最大宽度但读取 header 中的 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 中以 700 像素的宽度保存您的模板。

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

<!--[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]-->

在此之后，限制只是您的想象力或设计师。完成设计后，参与线框图阶段非常重要，这样一旦设计进入编码阶段就不会出现意外。

注意:

• Retina 图像将需要在元素级别而非其样式上设置图像
• 您仍然可以选择执行内联 CSS，或者您可以选择仅在 如果您的所有客户端都支持 head 中的 CSS 时在 head 中使用 CSS。