一、背景
以前做項目碰到發郵件的需求，郵件模板的編輯就是一件頭疼的事。因為雖說郵件是支持 HTML 的，但是確是 HTML 子集程度的支持，所以存在必須通過 <table> 排版的惡心之處，還有很多兼容性的坑。本質上是各家郵件商的標准有差異吧。
具體可參考阮一峰的這篇：http://www.ruanyifeng.com/blog/2013/06/html_email.html
於是我在網上 google 了下，發現了 mjml 這個最 hot 的 響應式電子郵件框架。
二、特點
1、那 mjml 就是一個類似 bootstrap 在 HTML + CSS 的地位，他們都提供了一些更高級的語法(標簽)【叫MJML】，磨平了各家客戶端在解析和指定標准上的差異。
2、mjml 的新語法學起來也很快，不多，好理解，易上手，然后基於組件化，能很快的搭出來你想要的 Email 內容。
3、mjml更支持響應式布局，且是移動端優先。
三、使用
1、安裝
其實有 npm 包，我懶得安裝，遂用的在線編輯器：
支持在線自動保存，很好用。
2、DEMO
(1) 地址
https://mjml.io/try-it-live/ry_x-1IZH
(2) 代碼
<mjml>
<mj-head>
<mj-title>Hello Register</mj-title>
<mj-attributes>
<!-- 1、定義 global 樣式 -->
<!-- 針對某個元素 -->
<mj-text line-height="150%" />
<!-- 針對所有元素 -->
<mj-all font-family="Arial" />
<!-- 2、定義 class 樣式 -->
<mj-class name="title" font-size="35px" align="center" />
</mj-attributes>
<!-- 3、定義 css 樣式 -->
<mj-style inline="inline">
.sign div { padding-left : 5px !important; color:#8C8C8C !important; }
</mj-style>
</mj-head>
<mj-body>
<mj-wrapper background-url="https://i.loli.net/2019/07/14/5d2b00fad302f18835.png" background-repeat="no-repeat" background-size="100% 100%" padding="30px">
<mj-section>
<mj-column>
<!-- 4、定義 inline 樣式 -->
<mj-image width="100px" src="https://mjml.io/documentation/images/logo.png"></mj-image>
</mj-column>
</mj-section>
<mj-section>
<mj-column>
<mj-text mj-class="title">Register Success!</mj-text>
<mj-spacer height="10px" />
<mj-text>Dear [username],</mj-text>
<mj-text>Thank you for the registration, you are welcomed to be our first tier users. Please click the link to activate your account:</mj-text>
<mj-button href="http://www.google.com"> Activate </mj-button>
</mj-column>
</mj-section>
<mj-section>
<mj-column width="70%">
<mj-social>
<mj-social-element name="facebook" href="https://mjml.io/">
Facebook
</mj-social-element>
<mj-social-element name="google" href="https://mjml.io/">
Google
</mj-social-element>
<mj-social-element name="twitter" href="https://mjml.io/">
Twitter
</mj-social-element>
</mj-social>
</mj-column>
<mj-column width="30%">
<mj-text css-class="sign">
COPYRIGHT<br/> @2019
</mj-text>
</mj-column>
</mj-section>
</mj-wrapper>
</mj-body>
</mjml>
(3) 預覽效果
3、注意知識點
(1) 一個最簡的框架
<mjml>
<mj-body>
<mj-section>
<mj-column>
<!-- First column content -->
</mj-column>
<mj-column>
<!-- Second column content -->
</mj-column>
</mj-section>
<mj-section>
<mj-column>
<!-- 即使只有一個 <mj-column>，也得在<mj-section>下 -->
</mj-column>
</mj-section>
</mj-body>
</mjml>
包含關系：mjml > mj-body > mj-section > mj-column。
mj-section 不能嵌套到 mj-section 中， mj-column 也不能嵌套到 mj-column 中。
(2) mj-group
因為 mjml 是移動端優先，那么mj-group 允許您阻止 mj-column 在移動設備上堆疊。
(3) mj-spacer
建議用 mj-spacer 代替 br 去換行
(4) mj-text
原生的 html，例如 <b>qwe</b> 、<a href="#">click</a> ，建議放在 mj-text 里 ，否則不顯示也不生效。
(5) mj-hero 和 mj-warpper 的區別
mj-hero 只針對 mj-section下
而 mj-warpper 可以把多個 mj-section 包裝在一起。實現跨 mj-section 共享邊框或背景圖像。
坑：background-color 只能加到 mj-warpper 、mj-hero、 mj-section 等上面。
4、高級功能
（1）除了有社區組件的提供，自己也可以創建組件
（2）支持 JSON 語法構建 Email。
（3）有豐富的插件系統，支持 VS、Atom、Sublime。