背景
最近在用 mjml 来制作邮件模板, 在 Desktop & mobile 端都期待有不错的效果.
The only framework that makes responsive email easy
但是！BUT！发现了一些 CSS 的属性邮件客户端根本压根完全不支持 🌝 在此记录.
Outlook, Gmail, Yahoo! Mail 不支持的属性
margin
Most webmail clients such as Outlook.com and Yahoo! Mail do not allow negative margin values and Gmail is no exception.
position
Unfortunately, you can’t use position: absolute.
Because Outlook is using the Word HTML renderer, you will also run into problems using absolute positioning.
Yahoo mail is a funny one, it supports position:absolute; but not top bottom left or right therefore rendering it useless.
为什么我会踩到了这两个大坑? 在你编写邮件模板时其实不一定会遇到这个问题的.
就是因为我们的邮件背景是上下结构的两种颜色！ 背景之上再浮动一层邮件的内容！
看似简单, 调试顺利, 发送的邮件怎么都不是预想的效果还把 QQ 邮件客户端的样式给搞乱了 🌚..
再此还是感谢 QQ 邮件客户端的发送 HTML 格式内容的功能!
mjml
使用 mjml 编写邮件模板总体来说简单好看容易编写, 需要注意的一点是 mj-section, mj-column 不要过度使用, 保持 mjml 文件的简洁, 如此一来生成的 html 文件大小也会很合适, 不会过大.
使用 @media screen and (min-width: 320px) { .content { width: 302px; } } 来布局, 保持桌面,平板和手机端的展示效果.
总结
HTML 写的再酷炫, 邮件客户端展示出来的邮件内容依然是基于 table 的, 那么知道我们不能做什么, 是很重要的事. 降低期望, 逐步完成. 期间也去网易云找过各种设计师听的歌单 😑, 结果怎么样, 都是现阶段能够做到的事了.