MJML到响应式电子邮件HTML转换器
指导
MJML到响应式电子邮件HTML转换器
粘贴MJML代码，立即获得可直接用于生产的、基于表格的响应式电子邮件HTML代码，包含Outlook（MSO）条件注释、内联样式以及实时的桌面和移动预览。该编译过程完全在您的浏览器中运行，使用官方MJML引擎，因此您的模板永远不会离开您的设备。
如何使用
- 在左侧编辑器中粘贴或输入您的MJML源代码（或点击 尝试一个示例 加载一个示例模板）。
- 选择输出样式： 美化版 用于可读的HTML代码， 最小化 用于最小化体积，或 原始版 用于引擎的默认设置。
- 选择验证级别： 柔软的 记录问题但不阻止编译， 严格 在出现错误时中止编译， 跳过 关闭验证。
- 在右侧检查编译后的HTML代码，并使用设备切换按钮预览桌面和移动布局。
- 点击 复制 HTML 复制代码，或 下载 .html 将代码保存到您的邮件服务提供商（ESP）或邮件客户端。
特征
- 完整支持MJML规范 – 包括 mj-section、mj-column、mj-button、mj-image、mj-text、mj-divider、mj-head 属性等。
- 适用于Outlook的输出 – 为旧版Outlook桌面客户端提供MSO条件注释和基于表格的布局。
- 实时预览 – 使用沙箱iframe，桌面设备宽度为600px，移动设备宽度为360px。
- 错误和警告提示 – 显示带有行号和违规标签名称的内联消息。
- 美化、压缩或原始输出 – 根据您的编辑器或发送流程选择合适的格式。
- 100% 客户端 – 您的MJML源代码和生成的HTML代码永远不会触碰服务器。
- 复制和下载 – 支持一键复制到剪贴板或保存为独立的.html文件。
常问问题
-
什么是MJML，以及为什么它被用于电子邮件？
MJML（Mailjet Markup Language）是一种开源标记语言，旨在使响应式电子邮件开发变得可行。手动编写HTML电子邮件非常痛苦，因为电子邮件客户端（尤其是旧版本的Outlook）需要嵌套表格、内联样式和MSO条件注释才能正确显示。MJML提供了一组高级组件词汇（如mj-section、mj-column、mj-button、mj-image、mj-text），这些组件会自动编译为传统的表格HTML，从而让您拥有一个在现代和旧版客户端中都能一致渲染的单一源代码。
-
为什么电子邮件HTML需要表格和内联样式，而不是现代CSS？
电子邮件客户端会将接收到的HTML进行沙箱化并重新渲染。许多客户端会剥离样式、忽略外部样式表，并仅支持CSS属性的子集。Windows版Outlook使用Microsoft Word的HTML渲染器，不支持flexbox、grid甚至浮动。唯一在所有客户端中都能可靠渲染的布局基础是带有明确宽度属性的HTML表格以及每个元素上的内联样式。MJML将这种繁琐且容易出错的底层结构隐藏在简洁的组件背后。
-
什么是MSO条件注释，为什么MJML输出会包含它们？
MSO条件注释是形式为 的特殊HTML注释，只有Microsoft Outlook（Windows）会处理。它们允许您为Outlook提供备用标记——例如，使用VML（向量标记语言）形状制作的按钮，即使在Outlook的缺陷渲染器中也能显示为真实的矩形。编译后的MJML输出包含这些条件注释，以确保一个模板能够从Apple Mail和Gmail平滑降级到Outlook 2007及更高版本。
-
在电子邮件客户端CSS支持有限的情况下，什么是真正的响应式电子邮件？
响应式电子邮件通常结合两种策略：一个基于表格的、可伸缩的桌面布局（最大宽度约为600px，居中显示）以及一组CSS媒体查询，在视口较窄时将列堆叠并调整字体大小。由于一些客户端会忽略媒体查询，MJML会首先生成一个基于百分比表格的、能适应常见宽度的布局，然后在支持媒体查询的客户端上叠加媒体查询覆盖层。最终结果是，即使CSS支持不完整，电子邮件在手机上看起来也显得有目的性和协调性。
-
美化版和压缩版HTML输出之间有什么实际区别？
美化版输出保留了缩进和换行，便于检查代码、比较模板变更或在代码审查中粘贴。压缩版输出移除了所有空白和注释以减小体积——这对于某些邮件服务提供商按千字节收费以及Gmail对消息大小限制约为102KB的情况非常有用。从功能上看，两者生成的最终邮件效果完全相同；在编写时选择美化版，在发送时选择压缩版。
