使用MJML制作的响应式HTML邮件在Gmail中失响应，如何正确导入？

你的问题核心确实出在复制浏览器渲染后的HTML上——浏览器会自动处理或过滤邮件所需的特殊代码结构，导致Gmail无法识别响应式规则。以下是正确的导入步骤：

• 直接使用MJML导出的原始HTML文件
  不要在浏览器中打开渲染后的HTML再复制，浏览器会丢失MJML生成的完整媒体查询结构、特殊嵌套标签，甚至自动修改代码格式。正确做法是直接从MJML编辑器导出完整的HTML文件（点击导出按钮保存为.html），用这份原始代码导入Gmail。

• 用开发者工具插入完整HTML代码
  Gmail的富文本编辑器直接粘贴HTML会自动过滤部分代码，需通过开发者工具插入：

  1. 打开Gmail新建邮件，确保处于富文本编辑模式（不要选纯文本）。
  2. 右键点击邮件编辑区域，选择「检查」打开开发者工具。
  3. 在Elements面板中找到邮件编辑框对应的元素（通常是带aria-label="Message Body"的<div>或<iframe>内的编辑区）。
  4. 清空该元素内的内容，将MJML导出的完整HTML代码粘贴到该元素的innerHTML中，关闭工具即可。

• 用桌面邮件客户端中转
  如果觉得开发者工具麻烦，可以用Outlook、Thunderbird等桌面客户端：直接导入HTML文件作为邮件内容，再通过绑定的Gmail账户发送，这样能最大程度保留代码完整性。

• 额外的Gmail兼容性检查
  即使Litmus测试通过，Gmail有特殊渲染规则：

  • 媒体查询必须放在<head>的<style>标签内，格式要标准，比如：

    @media only screen and (max-width: 600px) {
      .mj-column-per-100 { width: 100% !important; }
    }
    

  • 优先使用类选择器，避免复杂嵌套选择器，Gmail对CSS支持有限。
  • 所有样式要么内联，要么放在<head>里，不要用外部CSS文件（会被屏蔽）。

完成后记得给自己发测试邮件，在手机和桌面端验证响应式效果。

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