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

Question

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

还有谁能告诉我他们会推荐的电子邮件测试器，用于在开发过程中测试响应式电子邮件。

这是 Codepen

上的电子邮件模板的 link

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 模板也很烦人。您使用的模板是 pre-hybrid 时期构建的。该代码严重依赖于仅适用于 iOS 和 Android 4.4 及以下版本的媒体查询。尝试编码的混合方法。如果您还没有听说过混合，它是唯一允许所有设备显示电子邮件响应版本（甚至是 Gmail、Gmail 应用程序和三星设备）的方法。

我写了一个循序渐进的方法（最初在 SO 文档中，现在如下所示），您可以立即使用它来构建自己的模板。如果您的 header 中有内联网站，您可以在线使用内联网站来内联您 CSS。如果您需要我以任何方式帮助创建完整模板，请告诉我。

使用的编码方式：Hybrid/Spongy

div 不能用于电子邮件一直是个神话。有些电子邮件客户端（与 outlook 不同）可以正确呈现 div。下面的示例将说明如何对电子邮件进行编码，使其适用于 Gmail 应用程序（更新尚未推出）、三星设备和其他不读取媒体查询的电子邮件客户端。

引入 Outlook 条件语句

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

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

以上代码为if greater than microsoft outlook 9 or 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 开始，它将一直跨越整个屏幕，并带有一个 class 的容器。

<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 条件语句，使 table（带有 class 容器）的宽度为 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 图像将需要在元素级别而非其样式上设置图像
您仍然可以选择 in-line CSS 或者您可以选择 CSS 仅在头部如果所有客户都支持 CSS在头上。

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

Trying to get email to collapse at responsive column points using Zurb Foundation

html

css

email

twitter-bootstrap

zurb-foundation