# px to rem
将 px 转化成 rem 的 gulp 插件。
### 使用方法
### 参数说明
width_design:设计稿宽度。默认值640
valid_num:生成rem后的小数位数。默认值4
pieces:将整屏切份。默认var gulp = require('gulp');
var px2rem = 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 () {
function resizeBaseFontSize() {
var rootHtml = 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 () {
var step = 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))
return new Promise(function(resolve) {
resolve();
});
})
### 插件链接
https://www.npmjs.com/package/gulp-px2rem-plugin