gulp 移动文件_使用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);