在不使用CSS媒体查询的情况下响应HTML电子邮件模板？

Responsive HTML Email Template without using CSS media queries?(在不使用CSS媒体查询的情况下响应HTML电子邮件模板？)

问题描述

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

但在小屏幕上只有一列，其内容居中：

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

推荐答案

我找到的完成此操作的最佳方法是在表内使用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条件选项相比，它的可定义性要差得多。

大多数客户端(ref)都接受以div表示的最大宽度，但Outlook桌面除外，它由MSO条件处理。如果您想要更进一步的控制，也可以将div设置为定义的宽度而不是最大宽度，从而实现更可控的环境。

这篇关于在不使用CSS媒体查询的情况下响应HTML电子邮件模板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！