说到这个，还要从我第一次接手“邮件模版”需求写起
PM：写个邮件模版，数据让后端渲染给你～
Me: 看到设计稿，觉得挺简单的呀，花了一天照着设计稿写出来了，直接在本地调试，没有什么问题
QA： 你的邮件模版在xx邮箱中看起来好奇怪，跟设计稿完全很多不一样啊
Me: QAQ，咦，这么奇怪的吗，我看看
发现到了真实邮箱里面，情况跟自己想的完全不一样，各大邮箱会在我们写好的邮件html外面嵌套标签，而且有些比较新的样式，都没有起作用: (
于是百度谷歌了一番，发现原来写HTML邮件还是有很多讲究的，下面就让我来为大家普及一下我在写了十个HTML邮件之后，总结（踩过）的经验（坑）。
参考：https://segmentfault.com/a/1190000008864116
http://www.ruanyifeng.com/blog/2013/06/html_email.html
1）Doctype的使用
目前。兼容性最好的Doctype是XHTML 1.0 Strict，事实上Gmail和Hotmail会删掉你的Doctype，替换成这一个。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>如何编写HTML邮件</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
</html>
2）布局
请务必使用table去布局，这样子才能达到最佳的适配效果。为了在移动端跟PC端可以正常显示邮件，table的宽度最大为600px。
3）关于样式
这个也是我踩坑最大的地方
要写HTML Email ，需要用最久远的编写html方法去写，不能用css3新属性
字体样式要写在自己当前的td上面，写在父亲td不生效，所以字号还是默认的12px
网友评论