邮箱发送html案例

邮箱发送案例笔记

今天在做邮箱发送案例的时候发现有一些问题需要处理

这里的邮箱指的是QQ邮箱

  1. 避免使用*zoom,*display,*xxx
  2. 避免使用css样式选择器
  3. 规定宽度如650px 利用margin居中
  4. 所有样式内联
  5. 避免使用复杂样式

1.则是因为邮箱在处理的时候会把不标准的css样式给屏蔽掉.所以导致*xxx 以后的样式全部无效.如果要用请把*xxx放在最后进行处理

2.和4.可以先利用选择器写好然后再利用gulp脚本自动生成,这里给出一段,所需模块已经require,需要的可以直接去npm进行下载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const gulp=require("gulp");
const inlineCss=require("gulp-inline-css");
const rename=require("gulp-rename");
module.exports=function () {
gulp.task("inlineCss",()=>{
return gulp.src("./dist/html/微信邀请函/*.html")
.pipe(inlineCss())
.pipe(rename((path)=>{
path.dirname="./";
path.basename+="-inline-css";
}))
.pipe(gulp.dest("./dist/html/微信邀请函/inlineCss/"))
})
};
  1. 则是因为避免不同屏幕大小下的问题.这里给出一个参考值650px