Question

我想使用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" width="60%" style="border-collapse: collapse; margin: auto;">
                    <tbody>

第一个是全宽，另一个表是60％，我想100％用于手机，但媒体查询在Gmail / Outlook中不起作用，如何实现这一结果？

感谢您的帮助。

Answer 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年内没有更新，但它们可能对你有用。

适合移动设备和桌面设备的电子邮件内容

1 个答案: