Question

如何在我的简报中将width添加到表中并让它对所有电子邮件客户端做出响应？

A

style="width: 100%"

B

style="width: 300px"

C

 width="300"

d

 width="300px"

电子

 width="100%"

Answer 1

要涵盖所有电子邮件客户端，包括桌面Outlook和移动版Gmail，您需要混合/海绵方式：

<div style="max-width: 300px;">
  <!--[if (gte mso 9)|(IE)]>
    <table cellspacing="0" cellpadding="0" border="0" width="300"><tr><td>
  <![endif]-->
  <table cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 300px;">
    /* email code */
  </table>
  <!--[if (gte mso 9)|(IE)]>
    </td></tr></table>
  <![endif]-->
</div>

它的核心是，它使用最大宽度和最小宽度来施加刚性基线（允许一些移动），并为无论如何被束缚到桌面的Outlook施加固定的宽宽度。一旦设置了适合移动设备的基准，媒体查询就会在支持它的客户端中逐步增强电子邮件。

它非常冗长，基本上需要两组标记（一组用于桌面Outlook，一组用于其他人），但这种方法可以让您在主要电子邮件客户端中完全覆盖。

This template显示了此代码的基本版本。

Answer 2

使用style代替width属性，因为它已在HTML5中弃用
我建议100％宽度和最大宽度一起使用，因为在宽度超过960px的屏幕中找到下一行是不舒服的。
```
<div style="width:100%;max-width:960px;">your content here</div>
```

如何为电子邮件简报添加“响应”宽度？

2 个答案: