写出一篇适配各个主流邮箱（国内&国外）的邮件html模板

写出一篇适配各个主流邮箱（国内&国外）的邮件html模板

开发工具：\

1. 可查询各个属性在各种邮件和机型下的适配情况
2. liveServer插件。

其他参考：
邮件中嵌⼊html中要注意的样式

心得

因为邮件是公共信息，各种邮箱会对此做安全性限制，像是position，万一开发者把图片hack到邮箱的其他地方，就会出现问题，因此往往限制这类属性。
网页版的邮箱往往比移动端的多一点兼容，不过我们的最低兼容标准还是以移动端为准。
以前总是吐槽QQ邮箱，写了html模板以后，我只想说：相比起国外的那些邮箱来说，你知道QQ邮箱有多努力吗呜呜呜，为了开发者它们的兼容做的真的已经是top级别了呜呜呜，QQ邮箱真的，太温柔了，我哭死。
PS:最近发现了一个巨好的方法：就是用图片！图片！只要非变量的地方全tm导图片来做，那兼容性刚刚的。（笑

1. html标签中，主要使用最基础的标签：div | p | img | a | span | table 。
2. css属性中，只能使用css2的属性，即最基础属性，且必须使用行内样式，写在class里的很多邮件不识别。因此比如媒体查询、background渐变色等等想想就太新了。最坑的是，布局时常用的flex | positon也是不行的。
3. font属性中：
   font-size会在部分机型上出现问题，主要是IOS某些机型，会把字体大小全部自动使用IOS默认的全局字体大小，行内样式+important也没用（心态崩），后面我用table包裹了一下这部分数据，忽然就可识别大小了（？）总之问题就顺利解决。
   font-family更坑，首先为了字体的统一，每段落的css行内样式上都必须写好font-famly，而且最好多写几个以防部分邮件不支持某些字体，需要使用大众常用的字体样式，我从gmail google自己写的邮件里copy了几个字体，然后跟着设计的字体比对，尽量把相近的样式放前面。但是就算这样，还是有邮箱会直接忽略你的字体样式，也就是直接删掉你设置的font-family属性，只采用自己规定的字体，不过目前测试完毕也只有一个邮箱出现了这个情况（具体哪个邮箱我忘了）反正说明之后业务方表示可以接受。

   font-family: Roboto, sans-serif, PingFang SC,  Arial, Ubuntu, Noto Sans, Microsoft YaHei, 微软雅黑, WenQuanYi Micro Hei, Heiti SC!important;
   

4. body上不要写样式，很多邮箱会用自己的页面标签 或者iframe渲染，不会渲染开发者html里的body，因此我都是在Body内再嵌套一个div。
5. 因为没有媒体查询，为了适配从PC端到移动端的各种邮箱，建议整个邮件的宽度不要太宽，我们的邮件有最大宽度是600px，然后图片和字段我都用的100%来适配。居中采用margin:0 auto，text-align:center+padding来做。
6. 布局：不能使用flex / positon，利用最原始的block(div)和行内block(span)的属性排版，或者float，全部使用 div包裹+float+width:百分比 流，但是其实最多的还是table布局（只是好久不用了）

1. iCloud邮箱出现图片偏移。

很难以想象图片渲染的时候经历了什么…明明设置了margin:0,padding:0,width:100%,甚至还再用了一个div包起来，仍然不能贴合边缘。
然后我就用一个table把img包了起来，然后就好了…
但是我在手机用微信打开QQ邮件，忽然发现这个被包起来的图片挪到整个邮件的最低端去了，无奈的我再用一样的table包裹大法把图片之后的 其他的所有样式也包起来，然后就正常了，字体大小不对的问题也正常了！（喜大普奔

   <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
      style="vertical-align:bottom;border-collapse:collapse;border-spacing:0px;" width="100%">
      <td align="center" style="width:100%;margin: 0;padding:0;font-size: 0px;">
      </td>
   </table>

布局问题上面已解释。

字体问题上面已解释。