前端邮箱模版开发实现

方案一

缺点，客户端手机app应用不支持，媒体查询，放弃

link: https://get.foundation/emails/docs/alignment.html
row: 行
  row class="collapse"去掉列里的间距

column: 12份
  small="12" large="6"(大屏占一半，小屏占全屏)
  class="large-offset-3"  列的左侧添加间距
  .first .last 给第一列和最后一列添加padding的

Typography排版: 段落，标题，小标题，链接，分屏器，sass参考

Alignment 对齐方式
  文字对其方式
  img的对其方式
  按钮剧中
  菜单剧中
  列垂直居中
  列水平剧中
  Centering Columns(剧中列)
    <columns small="7">设置列，占的宽度

VisibilityClasses: 媒体查询，控制大小屏的显示和隐藏

callout: 是一个框子

wrapper: 全宽背景

button:size,expanded(展开的)，color,radius

container: 放内容的盒子，一般外部使用wrapper包装
          所有电子邮件都应该有一个容器元素。
          这为电子邮件客户端在大屏幕上提供了最大宽度。
          它还将电子邮件定位在中心。

h-line: 分屏，横线

Thumbnail缩略图: 

Spacer垫片:

menu菜单:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

参考链接
黑猩猩邮件模版，一些电子邮件基础知识和模版

常用邮箱css兼容文档

前端高质量邮件信开发实现

HTML 文件在PC&移动端完美自适应布局的技巧

HTML邮件多平台适配

测试发送邮箱

EDM需求模版

邮件模版

stripo.email模版

sendblue免费模版

找接近需求的免费的邮箱模版
再编辑加工，导出html或者chrome邮箱
chrome邮箱，找草稿，


1
2
3
4
5

手工打造

https://www.youtube.com/watch?v=_G5OuTmuU0Q
yutobe视频教学

问题总结

1. web支持媒体查询，但是手机app应用不支持，所以不用媒体查询
2. 有个别，邮箱使用了，媒体查询，但是在手机app应用不支持，所以手机网页打开，和手机app应用打开表现不一致
3. banner,图片上放按钮，不支持，position属性支持不友好，没有层级概念

方案一

https://mail.qq.com/cgi-bin/frame_html?sid=MTGHYhCjX3vxR2UG&r=01be8e7c84509d9829d3b2327714aa45&lang=zh
层级关系，margin -100px 顶上去的，如果为按钮的背景色，层级会在图片之下，
按钮为一张图片，用a标签包裹，用margin顶上去
[图片]

方案二

https://mail.qq.com/cgi-bin/frame_html?sid=MTGHYhCjX3vxR2UG&r=01be8e7c84509d9829d3b2327714aa45&lang=zh
背景色和图片组合看起来，像是banner图片
[图片]

方案三

整张图片可以点击，图片上的按钮，提示用户可以点击，其实整张图片都可以点
[图片]