mjml

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

MJML Expert

MJML 专家

MJML (Mailjet Markup Language) is a markup language designed to reduce the pain of coding responsive emails. It compiles to responsive HTML that works across email clients.

MJML（Mailjet Markup Language）是一种标记语言，旨在减少编写响应式邮件的难度。它会编译为可在各类邮件客户端中正常显示的响应式HTML。

Document Structure

文档结构

Every MJML document follows this hierarchy:

xml

<mjml>
  <mj-head>
    <!-- Head components: styles, fonts, attributes, preview text -->
  </mj-head>
  <mj-body>
    <!-- Body components: sections, columns, content -->
  </mj-body>
</mjml>

每个MJML文档都遵循以下层级结构：

xml

<mjml>
  <mj-head>
    <!-- 头部组件：样式、字体、属性、预览文本 -->
  </mj-head>
  <mj-body>
    <!-- 主体组件：区块、列、内容 -->
  </mj-body>
</mjml>

Component Hierarchy

组件层级

MJML enforces a strict nesting structure:

mjml
├── mj-head
│   ├── mj-attributes (define defaults and classes)
│   ├── mj-style (CSS styles)
│   ├── mj-font (external fonts)
│   ├── mj-title (document title)
│   ├── mj-preview (inbox preview text)
│   └── mj-breakpoint (responsive breakpoint)
│
└── mj-body
    ├── mj-wrapper (optional: wraps multiple sections)
    │   └── mj-section
    │
    └── mj-section (rows)
        ├── mj-group (prevents column stacking on mobile)
        │   └── mj-column
        │
        └── mj-column (responsive columns)
            ├── mj-text
            ├── mj-image
            ├── mj-button
            ├── mj-divider
            ├── mj-spacer
            ├── mj-social
            ├── mj-navbar
            ├── mj-table
            ├── mj-raw
            ├── mj-accordion
            ├── mj-carousel
            └── mj-hero

Critical rule: Content blocks (text, image, button, etc.) must always be inside

mj-column

. Columns must be inside

mj-section

mj-group

MJML强制要求严格的嵌套结构：

mjml
├── mj-head
│   ├── mj-attributes（定义默认值和类）
│   ├── mj-style（CSS样式）
│   ├── mj-font（外部字体）
│   ├── mj-title（文档标题）
│   ├── mj-preview（收件箱预览文本）
│   └── mj-breakpoint（响应式断点）
│
└── mj-body
    ├── mj-wrapper（可选：包裹多个区块）
    │   └── mj-section
    │
    └── mj-section（行）
        ├── mj-group（防止列在移动端堆叠）
        │   └── mj-column
        │
        └── mj-column（响应式列）
            ├── mj-text
            ├── mj-image
            ├── mj-button
            ├── mj-divider
            ├── mj-spacer
            ├── mj-social
            ├── mj-navbar
            ├── mj-table
            ├── mj-raw
            ├── mj-accordion
            ├── mj-carousel
            └── mj-hero

重要规则：内容块（文本、图片、按钮等）必须始终放在

mj-column

内部。列必须放在

mj-section

或

mj-group

内部。

Column Sizing

列尺寸设置

Auto Sizing

自动尺寸

By default, columns divide available width equally. Standard email width is 600px:

2 columns = 300px each
3 columns = 200px each
4 columns = 150px each

默认情况下，列会平均分配可用宽度。标准邮件宽度为600px：

2列 = 每列300px
3列 = 每列200px
4列 = 每列150px

Manual Sizing

手动尺寸

Override with explicit

width

attribute:

xml

<mj-section>
  <mj-column width="33%"><!-- Narrow --></mj-column>
  <mj-column width="67%"><!-- Wide --></mj-column>
</mj-section>

Both pixel and percentage values are supported.

使用

width

属性覆盖默认设置：

xml

<mj-section>
  <mj-column width="33%"><!-- 窄列 --></mj-column>
  <mj-column width="67%"><!-- 宽列 --></mj-column>
</mj-section>

支持像素和百分比两种单位。

Common Attributes

常用属性

Most components support these attributes:

Attribute	Description	Example
`padding`	Spacing inside element	`10px 25px`
`background-color`	Background color	`#ffffff`
`width`	Element width	`100%` or `300px`
`align`	Horizontal alignment	`left` , `center` , `right`
`vertical-align`	Vertical alignment	`top` , `middle` , `bottom`
`font-family`	Text font	`Arial, sans-serif`
`font-size`	Text size	`14px`
`color`	Text color	`#333333`
`line-height`	Line spacing	`1.5` or `22px`

大多数组件支持以下属性：

属性	描述	示例
`padding`	元素内边距	`10px 25px`
`background-color`	背景颜色	`#ffffff`
`width`	元素宽度	`100%` 或 `300px`
`align`	水平对齐方式	`left` , `center` , `right`
`vertical-align`	垂直对齐方式	`top` , `middle` , `bottom`
`font-family`	文本字体	`Arial, sans-serif`
`font-size`	文本大小	`14px`
`color`	文本颜色	`#333333`
`line-height`	行间距	`1.5` 或 `22px`

Using Classes

使用类

Define reusable styles with

mj-class

xml

<mj-head>
  <mj-attributes>
    <mj-class name="primary" background-color="#4A90D9" color="#ffffff" />
    <mj-class name="heading" font-size="24px" font-weight="bold" />
  </mj-attributes>
</mj-head>

<mj-body>
  <mj-section>
    <mj-column>
      <mj-button mj-class="primary">Click me</mj-button>
      <mj-text mj-class="heading">Welcome</mj-text>
    </mj-column>
  </mj-section>
</mj-body>

通过

mj-class

定义可复用样式：

xml

<mj-head>
  <mj-attributes>
    <mj-class name="primary" background-color="#4A90D9" color="#ffffff" />
    <mj-class name="heading" font-size="24px" font-weight="bold" />
  </mj-attributes>
</mj-head>

<mj-body>
  <mj-section>
    <mj-column>
      <mj-button mj-class="primary">点击我</mj-button>
      <mj-text mj-class="heading">欢迎</mj-text>
    </mj-column>
  </mj-section>
</mj-body>

Background Images

背景图片

Sections and wrappers support background images:

xml

<mj-section background-url="https://example.com/bg.jpg"
            background-size="cover"
            background-repeat="no-repeat">
  <mj-column>
    <mj-text color="#ffffff">Content over image</mj-text>
  </mj-column>
</mj-section>

区块和容器支持背景图片：

xml

<mj-section background-url="https://example.com/bg.jpg"
            background-size="cover"
            background-repeat="no-repeat">
  <mj-column>
    <mj-text color="#ffffff">图片上的内容</mj-text>
  </mj-column>
</mj-section>

Full-Width Sections

全屏宽度区块

By default, sections are constrained to 600px. Use

full-width

for edge-to-edge backgrounds:

xml

<mj-section full-width="full-width" background-color="#f4f4f4">
  <!-- Content still constrained, but background extends full width -->
</mj-section>

默认情况下，区块被限制在600px宽度内。使用

full-width

属性实现边缘到边缘的背景：

xml

<mj-section full-width="full-width" background-color="#f4f4f4">
  <!-- 内容仍受宽度限制，但背景延伸至全屏 -->
</mj-section>

Responsive Behavior

响应式行为

Columns automatically stack vertically on mobile (below breakpoint)
Use
```
mj-group
```
to prevent stacking for specific column groups
Default breakpoint is 480px; customize with
```
mj-breakpoint
```
Images scale responsively by default

列在移动端（断点以下）会自动垂直堆叠
使用
```
mj-group
```
防止特定列组堆叠
默认断点为480px；可通过
```
mj-breakpoint
```
自定义
图片默认会响应式缩放

Reference Documentation

参考文档

For complete component specifications with all attributes:

Body components:

${CLAUDE_SKILL_ROOT}/references/body-components.md

Head components:

${CLAUDE_SKILL_ROOT}/references/head-components.md

Layout patterns:

${CLAUDE_SKILL_ROOT}/references/patterns.md

如需包含所有属性的完整组件规格：

主体组件：

${CLAUDE_SKILL_ROOT}/references/body-components.md

头部组件：

${CLAUDE_SKILL_ROOT}/references/head-components.md

布局模式：

${CLAUDE_SKILL_ROOT}/references/patterns.md