不使用CSS媒体查询如何创建响应式HTML电子邮件模板？

Question

我希望设计一个简单的响应式HTML电子邮件模板，不使用CSS媒体查询或弹性盒子。当在大屏幕上时，我希望电子邮件的中间区域有两列：

但是只有在小屏幕上，它才具有一个列，并且其内容居中:

如果不使用媒体查询，你会如何做到这一点？

- Vincent D

Answer 1

最好的方法是在表格内使用DIV，同时使用MSO条件语句控制桌面Outlook的宽度。

例如：

<!--[if (gte mso 9) | (IE) ]><table width="640"><tr><td align="center"><![endif]-->
<table width="100%" align="center">
<tr>
<td align="center">
       <!--[if (gte mso 9) | (IE) ]><table width="100%"><tr><td width="300" align="center"><![endif]-->
    <div style="width:300px; display:inline-block; margin:0 auto; text-align:center;">
    <table align="center" width="100%">
              <tr>
                      <td class="left" align="center">
                        <img border="0" src="yourimage.png" width="280" />
                      </td>
              </tr>
            </table>
            </div>
           <!--[if (gte mso 9) | (IE) ]></td><td width="320" align="right"><![endif]-->
            <div style="max-width:320px; display:inline-block; margin:0 auto;">
            <table align="center" width="100%">
              <tr>
                      <td align="center">Your copy goes here</td>
                      </tr>
                      </table></div>
      <!--[if (gte mso 9) | (IE) ]></td></tr></table><![endif]-->
            </td>
          </tr>
        </table>
      <!--[if (gte mso 9) | (IE) ]></td></tr></table><![endif]-->

下一个最好的方法是通过TH标签实现：

<!--[if (gte mso 9) | (IE) ]><table width="640"><tr><td align="center"><![endif]-->
<table width="100%" align="center" style="max-width:640px;">
<tr>
<th align="center" width="300" style="display:inline-block;"><img src="yourimage.png"></th>
<th align="center" width="310" style="display:inline-block;">your copy here</th>
 </tr>
</table>
<!--[if (gte mso 9) | (IE) ]></td></tr></table><![endif]-->

这两种方法都有问题，需要不断地调整和操作才能使它们正常工作。但是，我发现TH方案有更多的问题（例如字体加粗、随机未解释的边框等），并且比div/mso条件选项更不可定制。

在大多数客户端中，div中的max-width被接受(参考)，除了Outlook桌面版，该版本由MSO条件处理。如果您想要更进一步的控制，还可以将div设置为定义的宽度，从而实现更加精细的环境。

- Gortonington

Answer 2

你可以通过以下方法实现这一点。

你可以为每个列定义一个固定的宽度，为父容器（在这种情况下是表格本身）定义一个最大宽度。目标是使次要列在没有足够空间容纳两个列时折叠到第一个列下面。 bZWokw CodePen CSS：

.column-1 {float:left; width:200px;}
.column-2 {float:left; width:400px;}
.content { padding:10px; }

The HTML

<table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td width="100%">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic autem ratione porro perferendis minus itaque ab harum molestiae natus ipsam.</p>
        </td>
    </tr>
    <tr>
        <td width="100%">
            <div class="column-1">
                <div class="content">
                    <img src="http://placehold.it/200x200/" alt="" style="max-width:100%;">
                </div>
            </div>
            <div class="column-2">
                <div class="content">
                    <h2>HAMILTON - The Revolution</h2>
                    <a href="">Review this Product</a>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td width="100%">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, esse itaque. Aliquid doloremque tempore, dicta iure consectetur odit vel eveniet minus mollitia reprehenderit incidunt ratione minima aut dignissimos, pariatur in.</p>
        </td>
    </tr>
</table>

- Luis Rivera

Answer 3

你可以通过将列设置为display: inline-block来使它们自动排列。不确定所有电子邮件客户端是否都支持它，但应该能够正常工作。

jsFiddle

HTML：

<div>Whatever content before</div>

<div class="row">
  <div class="col"><img src="image.jpg" /></div>
  <div class="col">text content</div>
  <div class="col"><img src="image2.jpg" /></div>
</div>

<div>Whatever content after</div>

CSS：

.row {
  text-align: center;
}

.col {
  display: inline-block;
  max-width: 300px;
  text-align: left;
}

- LawrenceWebDev

---

显示器不受Outlook和Gmail支持。https://www.campaignmonitor.com/css/ - Red2678

Answer 4

@Gortonington提供的答案非常好！我会更详细地讲解并提供一些代码：

<!--[if mso]>
<table border="0" cellspacing="0" cellpadding="0" align="center" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:660px;">
    <tr>
        <td align="center" valign="top" style="font-size:0;">
            <!--[if mso]>
            <table border="0" cellspacing="0" cellpadding="0" align="center" width="660">
            <tr>
            <td align="left" valign="top" width="330">
            <![endif]-->
            <div style="display:inline-block; Margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;">
                <table cellspacing="0" cellpadding="0" border="0" width="100%">
                    <tr>
                        <td>
                            CONTENT DOES HERE
                        </td>
                    </tr>
                </table>
            </div>
            <!--[if mso]>
            </td>
            <td align="left" valign="top" width="330">
            <![endif]-->
            <div style="display:inline-block; Margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;">
                <table cellspacing="0" cellpadding="0" border="0" width="100%">
                    <tr>
                        <td>
                            CONTENT DOES HERE
                        </td>
                    </tr>
                </table>
            </div>
            <!--[if mso]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </td>
    </tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->

这种方法被称为“混合方法”，可以重新配置电子邮件客户端的布局以适应不同屏幕大小，而不管媒体查询支持与否。在其核心，它使用max-width和min-width来强制实施严格的基线（允许一些移动），并对Outlook施加固定的宽度，因为Outlook本来就是桌面版。一旦设置了移动友好的基线，媒体查询会在支持它的客户端中进一步增强电子邮件。有一些开源模板可以实现这一点。我维护一个，其混合模板可以完成您所需的任务。

- Ted Goas

---

我喜欢你的混合方法，但是当我在Gmail上测试时，列内的部分内容在我的移动设备上被隐藏了。这很奇怪。我很匆忙，没有时间调试原因，但我找到了这个网页，他们的MS-Outlook方法对我有用：https://www.arclab.com/en/amlc/responsive-two-column-fluid-email-template.html - Dagmar

Answer 5

你使用表格并依赖于正常的文档流程(这里简要描述)。这里有太多需要解释的内容，虽然我自己讨厌只有链接的回答，但是这里有一个。

在我看来，这个回答解决了你的问题，也是我曾经阅读过的最好的电子邮件模板教程之一。

"创建一个未来可靠的响应式电子邮件，无需媒体查询"

http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

编辑：此外，这是一个非常好的链接，可以验证不同电子邮件客户端中CSS属性的兼容性：

https://www.campaignmonitor.com/css/

- Red2678

Answer 6

你可以尝试使用以下代码：width: 100%; max-width: 400px

- Văn Quyết

Answer 7

尝试使用Bootstrap3，它可能会对你有所帮助，它基本上是一个简化的CSS库。它非常适用于简单的网站和博客，但不适合复杂的应用。

- Shahin

---

Bootstrap使用媒体查询，但在技术上停留在上世纪90年代的HTML电子邮件中并不适用。HTML电子邮件意味着到处都有嵌套表格。 - ceejayoz

如何在 HTML 邮件中使用 Bootstrap？ - Jon P

正如其他人所说，Bootstrap 不适用于编写电子邮件。 - Ted Goas