如何为电子邮件通讯添加“响应式”宽度？答案

【问题标题】：How add "responsive" width for email newsletter?如何为电子邮件通讯添加“响应式”宽度？
【发布时间】：2016-09-30 02:32:47
【问题描述】：

如何将width 添加到我的时事通讯的表格中并让它响应所有电子邮件客户端？

一个

style="width: 100%"

style="width: 300px"

 width="300"

 width="300px"

 width="100%"

【问题讨论】：

你想要 100% 宽度还是 300px？
@AliSheikhpour 我读到 100% 可能有问题......所以如果不是真的最好有 100% 但如果有问题我会使用 300px
请记住，响应式设计不一定要对移动电子邮件客户端友好，但无论如何我都会选择 A。

标签： html email responsive-design html-email email-client

【解决方案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>

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

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

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

【讨论】：

【解决方案2】：

使用 style 而不是 width 属性，因为它在 HTML5 中已被弃用
我建议在样式中将 100% 宽度和最大宽度放在一起，因为在宽度超过 960 像素的屏幕中查找下一行并不方便。
```
<div style="width:100%;max-width:960px;">your content here</div>
```

【讨论】：

嗯...您说这适用于所有电子邮件客户端？（如果添加到表格标签中也是如此）
不幸的是，这在桌面 Outlook 中不起作用，因为它doesn't support max-width。