摘要：
#pxtorem将px转化成rem的gulp插件。默认值640valid_num：生成rem后的小数位数。默认值4pieces：将整屏切份。默认vargulp=require;varpx2rem=require;gulp.task;为10，相当于10rem=width_designignore_px：让部分px不在转换成rem。默认为空数组ignore_selector：让部分选择器不在转换为rem。默认为空数组###附加要求使用rem来布局，需要你使用js来动态设置html的font-size值。根据你的参数pieces设置，font-size=device-width/pieces。来就是说，如果手机物理像素为320，那么font-size:32px。
#pxtorem
将px转化成rem的gulp插件。
###使用方法
###参数说明
width_design：设计稿宽度。默认值640
valid_num：生成rem后的小数位数。默认值4
pieces：将整屏切份。默认vargulp=require('gulp');
varpx2rem=require('gulp-px2rem-plugin');
gulp.task('default',function(){
gulp.src('*.css')
.pipe(px2rem())
//.pipe(px2rem({'width_design':750,'valid_num':6,'pieces':10,'ignore_px':[1,2],'ignore_selector':['.class1']}));
});为10，相当于10rem=width_design(设计稿宽度)
ignore_px：让部分px不在转换成rem。默认为空数组
ignore_selector：让部分选择器不在转换为rem。默认为空数组
###附加要求
使用rem来布局，需要你使用js来动态设置html的font-size值。根据你的参数pieces设置，font-size=device-width/pieces。来就是说，如果手机物理像素为320，那么font-size:32px。
###动态设置html的font-size值
(function(){
functionresizeBaseFontSize(){
varrootHtml=document.documentElement,
deviceWidth=rootHtml.clientWidth;
if(deviceWidth>640){
deviceWidth=640;
}
rootHtml.style.fontSize=deviceWidth/7.5+"px";
console.log(rootHtml.style.fontSize)
}
resizeBaseFontSize();
window.addEventListener("resize",resizeBaseFontSize,false);
window.addEventListener("orientationchange",resizeBaseFontSize,false);
})();
###配置
gulp.task('css',function(){
varstep=gulp.src([folder.src+"/css/*"],{sourcemaps:true})
.pipe(connect.reload())
.pipe(sass())
.pipe(postCss([autoPrefixer()]))
.pipe(px2rem())
.pipe(px2rem({'width_design':375,'valid_num':4,'pieces':10,'ignore_px':[1,2],'ignore_selector':['.class1']}));
if(environment=='production'){
step.pipe(cleanCss())
}
step.pipe(gulp.dest(folder.dist))
returnnewPromise(function(resolve){
resolve();
});
})
###插件链接
https://www.npmjs.com/package/gulp-px2rem-plugin