px2rem (npm链接) ，顾名思义将px转换成rem。在移动端的时候，需要将px根据页面的fontSize来设置rem，现在可以一键完成。
首先安装node环境，然后安装：npm install px2rem
接着安装：npm install gulp-px3rem
编辑gulpfile.js
- var gulp = require(‘gulp’),
- px2rem = require(‘gulp-px3rem’);
- gulp.task(‘pxrem’, function() {
- gulp.src(‘src/style/sty.css’)
- .pipe(px2rem({
- remUnit: 64
- }))
- .pipe(gulp.dest(‘dest’))
- });
其他选项：
- px2rem({
- baseDpr: 2, // 基于设备的Dpr
- threeVersion: false, // 是否生成 @1x, @2x and @3x 三个版本(默认: false)，打开后
- remVersion: true, // 是否生成rem版本(默认: true)
- remUnit: 75, // rem转换比例 (默认: 75)
- remPrecision: 5 // rem保留几位数 (默认: 5)
- }
还有第二种方法，使用postcss插件，首先还是安装：npm install gulp-postcss
接着安装：npm install px2rem
再安装：npm install postcss-px2rem
编辑gulpfile.js
- var gulp = require(‘gulp’);
- var postcss = require(‘gulp-postcss’);
- var px2rem = require(‘postcss-px2rem’);
- gulp.task(‘default‘, function() {
- var processors = [px2rem({remUnit: 75})];
- return gulp.src(‘./src/*.css’)
- .pipe(postcss(processors))
- .pipe(gulp.dest(‘./dest’));
- });
如果只让某个属性的px转换成rem，其他的不转换。可以使用注视 /*px*/ 这个表示不转换rem， /*no*/ 表示直接忽略。
- .test{
- width: 150px;
- height: 64px;
- font-size: 28px; /*px*/
- border: 1px solid #ddd; /*no*/
- }
编译之后，如下图所示：
