gulp-px2rem-plugin #

将 px 转化成 rem 的 gulp 插件。

用 rem 来做响应式开发的时候，将 px 转换成 rem 值的时候，是每一个程序员头大的事情。


起初，我使用sublime的cssrem插件，效果挺好，避免了我重复使用小学学习的除法技能。但是，我们能感知的长度大小，还是像素，全部使用 rem 后，一旦设计稿有很多改动，你还知道有哪些 rem 不需要修改吗？


使用该插件后，源文件全部使用 px ，是不是又回到了做 pc 端页面的时代了？

$3

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']}));
});

$3

- width_design：设计稿宽度。默认值640
- valid_num：生成rem后的小数位数。默认值4
- pieces：将整屏切份。默认为10，相当于10rem = width_design(设计稿宽度)
- ignore_px：让部分px不在转换成rem。默认为空数组
- ignore_selector：让部分选择器不在转换为rem。默认为空数组

$3

使用 rem 来布局，需要你使用 js 来动态设置 html 的 font-size 值。根据你的参数 pieces 设置，font-size = device-width / pieces。来就是说，如果手机物理像素为320，那么 font-size:32px。

$3

 

$3

npm install gulp-px2rem-plugin --save-dev

$3

#### 0.4.X ####
修复bug。修复不能转换负数，修复不能转换属性后有多数值问题(类似margin属性)。
#### 0.3.X ####
增加功能。添加ignore_selector参数
#### 0.2.X ####
增加功能。添加ignore_px参数
#### 0.1.X ####
修改了0.0.x版本的bug，由于replace后的正则写的有误，无法全局替换。

由于水平的原因，这个插件还存在一些问题，如果您发现了bug，可以联系我(nilhave@126.com)，我会尽快修改。