邮箱发送案例笔记

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

这里的邮箱指的是QQ邮箱

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

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

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

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