Question

我正在为我的客户设置一个新的电子邮件签名，需要及时响应。

我尝试了一种布局，其中包括div，表等，它们在台式机上效果很好，但在手机上效果不佳。

下面是一个这样的示例，但电子邮件的显示方式与台式机和移动设备相同，单元格/ div相互之间移动。

作为研究的一部分，我尝试使用此电子邮件样板，最终以相同的方式进行。 -https://github.com/seanpowell/Email-Boilerplate

<!--[if gte mso 9]>
    <table cellspacing=0><tr><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
    <strong>Administrator</strong><br>Phone {qwfqwfcqwdqwfqfgqwfqwbfjqnwjkfqnwjfbqiwnf qwnfiquwnqwnfiqnwifjnqwfinqwifnqwjinfqjiwnfijqwnf}<br>Email <a href="mailto:{E-mail}" style="color: #fff; text-decoration: none;">{qwfqwfqwcqwfqwfqwfdqwcrqwrqwcrqwrqwrcqwrxqwrqwcxqrwqxrqwxqwx}</a>
</div>
<!--[if gte mso 9]>
    </td><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
    <strong>qwfqwfqwdqw fqwfqwfqwdfqwdqwfqwfqwdqwdqwdqw</strong> 
</div>
<!--[if gte mso 9]>    
</td></tr></table>
    <![endif]-->

https://jsfiddle.net/623y57p1/1/

看看我制作的演示。这在浏览器中是响应式的，但在Outlook中却不是。

Answer 1

我创建了与Outlook一起使用的示例代码。如果查看窗口大于580像素，则此电子邮件页脚的两列将并排显示。如果它小于该宽度，它将还原为两叠的列。您可以通过调整<td width="290">来设置宽度断点。

<table align="center" role="contentinfo" cellspacing="0" cellpadding="0" border="1" width="100%" style="margin: 0 auto;">
  <tr>
    <td width="290" style="direction: ltr !important; display: inline-block;">
      Column A
    </td>
    <td width="290" style="direction: ltr !important; display: inline-block;">
      Column B
    </td>
  </tr>
</table>

请记住一些警告：

Outlook 2007-2019不支持响应电子邮件。不支持@media查询。
table的宽度必须设置为<table width="100%">。
表单元格的宽度为290，因为Outlook查看窗口的最大宽度为580px。
您可以关闭<table border="1">出于演示目的。
<table role="contentinfo">支持屏幕阅读器。请保留它以帮助视觉障碍的用户了解您电子邮件的结构。
https://jsfiddle.net/wallyglenn/w0s4xmc0/60529/

祝你好运。

如何使Outlook电子邮件签名具有响应性

1 个答案: