gulp-px2rem-plugin 将px 转化为 rem

# 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