适合移动和桌面客户端的电子邮件内容

Posted 2023-03-05

【中文标题】适合移动和桌面客户端的电子邮件内容

【英文标题】：Fitting the Email content for mobile and desktop cilent

【发布时间】：2016-03-04 06:52:28

【问题描述】：

我想为桌面客户端使用 60% 的宽度并将列居中，但是对于邮件客户端，使用 100% 的宽度

到目前为止，我已经创建了两个表来包含这样的内容：

<table class="table table-mail" style="width:100%; margin-top: 10px; -moz-box-shadow: 0 0 5px #afafaf; -webkit-box-shadow: 0 0 5px #afafaf; -o-box-shadow: 0 0 5px #afafaf; box-shadow: 0 0 5px #afafaf; filter: progid:DXImageTransform.Microsoft.Shadow(color=#afafaf,Direction=134,Strength=5);">
    <tbody>
        <tr>
            <td class="space" style="width: 20px; padding: 7px 0;">&nbsp;</td>
            <td align="center" style="padding: 7px 0;">
                <table class="table" bgcolor="#ffffff"  style="border-collapse: collapse; margin: auto;">
                    <tbody>

第一个是全宽的，里面的另一个表是 60%，我想让它 100% 用于移动设备，但媒体查询在 Gmail / Outlook 中不起作用，如何实现这个结果？

感谢您的帮助。

【问题讨论】：

或者我应该修复内表的宽度，例如如果我把它固定为 650px ，它会不会对于小屏幕来说太大了？

【参考方案1】：

Campaign Monitor 的方便CSS Support Guide for Email Clients 表明绝大多数电子邮件客户端不支持响应式 CSS。如果您不介意缺少对某些版本的 Outlook 的支持，您可以改用 max-width，但您需要使用特定宽度而不是您想要的 60%。

.table-mail
    margin:0 auto;
    width:100%;
    max-width:650px;

29/04/16 更新

我后来发现了MailChimp's e-mail blueprints on GitHub，其中包括一些响应式模板。我还没有机会测试它们，它们已经 3 年没有更新了，但它们可能对你有用。

【讨论】：

谢谢，我只想支持outlook 2013，会检查一下

很遗憾，根据该指南，Outlook 2013 不支持 max-width。

任何解决方法？据我所知，前景是噩梦，但需要处理它