使用gulp将移动端px转为rem

使用gulp的插件可以很方便的将xp转为rem，在布局的时候使用@1x 、@2x布局，即10rem=device-width；@1x即设计图为320px，1rem对应的10px像素，相对的@2x即为布局使用640px的布局，1rem=20px像素；不过浏览器有默认最小字体，谷歌浏览器默认的最小的字体大小为12px，所以1x大小设置可能会出现问题，绝大多数还是会使用2x的布局方法；

在阅读这篇文章之前至少要回使用gulp，可以去中文网先了解写gulp的基本使用方法，我也是在总结gulp的使用方法，在自己总结好之后可以配置一个自己的gulpfile.js文件，以便完成前端整套工程化；这样可能在未来的某一天中，我们只需要打开命令行运行gulp就能完成一天之中除了敲代码之外的工作，想想都觉得爽。

1，在cmd或者linux git base here先全局安装npm install gulp-cli -g
2,任何地方创建一个文件，名字自己起 然后再这个文件下 打开 cmd 或者git Base hear然后输入命令npm install gulp-uglify
3，然后在输入命令
npm install gulp --》只能在当前文件中使用
npm install -g gulp任何目录下都可以使用gulp
4，安装px2rem模块 npm install gulp-px2rem-plugin --save-dev
5，在项目的根目录下编写gulpfile.js文件

var gulp = require('gulp');
var px2rem = require('gulp-px2rem-plugin');

gulp.task('default', function() {
    gulp.src('*.css')
        .pipe(px2rem())
});

6，在命令行中输入 gulp，这样基本的功能已经能够实现，

为了配合这个代码的实现，可以在你代码中（项目代码的js文件中）添加resize函数，来动态的计算rem.

(function(doc,win){
            function change(){
                doc.documentElement.style.fontSize=doc.documentElement.clientWidth*20/320+'px';
            }
            change();
            addEventListener('resize',change,false);
        })(document,window);