使用CKEditor发送响应式邮件的方法及媒体查询放置位置咨询

嘿，这个问题我刚好之前碰过，邮件响应式确实有点绕，尤其是结合CKEditor使用的时候，我给你理清楚关键点：

一、必须使用媒体查询吗？ #

没错，媒体查询是实现邮件响应式的核心方案。毕竟邮件客户端不像浏览器那样全面支持现代CSS布局（比如Flexbox/Grid在很多邮件客户端里支持有限），所以靠@media查询针对不同屏幕尺寸（尤其是移动端）调整样式，是目前行业通用的靠谱做法。

不过要注意：部分老版本的桌面Outlook（比如Outlook 2016及更早）不支持媒体查询，但主流客户端（Gmail、Apple Mail、Outlook网页版、移动端Outlook）都能正常识别，所以这个方案覆盖度足够。

二、媒体查询在CKEditor里的放置位置 #

这个要看你用CKEditor编辑的是邮件的哪部分内容：

情况1：CKEditor编辑完整的邮件HTML（包含、、） #

这是最规范的方式，把媒体查询放在<head>内的<style>标签里，和标准网页写法一致：

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* 基础桌面端样式 */
    .email-container {
      width: 600px;
      margin: 0 auto;
    }
    /* 移动端媒体查询 */
    @media only screen and (max-width: 600px) {
      .email-container {
        width: 100% !important;
        padding: 0 10px;
      }
      .email-column {
        width: 100% !important;
        display: block !important;
      }
    }
  </style>
</head>
<body>
  <div class="email-container">
    <!-- 你的邮件内容，比如文本、图片、表格等 -->
    <table>
      <tr>
        <td class="email-column">左侧内容</td>
        <td class="email-column">右侧内容</td>
      </tr>
    </table>
  </div>
</body>
</html>

直接把这段完整HTML粘贴到CKEditor的源码模式里就行（记得切换到源码视图，避免CKEditor自动过滤标签）。

情况2：CKEditor只允许编辑邮件正文（即内部的内容） #

很多邮件系统会把邮件的<head>部分固定在模板里，只让你编辑正文。这时候你可以把包含媒体查询的<style>标签直接放在正文的最顶部，大部分邮件客户端会识别这个位置的样式：

<style>
  @media only screen and (max-width: 600px) {
    .email-container {
      width: 100% !important;
      padding: 0 10px;
    }
    .email-column {
      width: 100% !important;
      display: block !important;
    }
  }
</style>
<div class="email-container">
  <!-- 你的邮件内容 -->
</div>

同样要在CKEditor的源码模式下粘贴，防止编辑器过滤<style>标签。

额外的小提示 #

• 结合内嵌样式：因为有些邮件客户端会忽略<style>里的样式，所以关键元素（比如表格、按钮）最好加上内嵌样式作为兜底，比如<td style="width: 300px;">，然后用媒体查询在移动端覆盖这个值。
• 用表格布局：邮件里尽量用表格来做布局，因为很多客户端对div的布局支持不好，表格是最稳定的方式。
• 测试！一定要在主流邮件客户端里测试效果，避免出现样式错乱。

内容的提问来源于stack exchange，提问作者Jack Maessen