使用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文件

/**
 * Created by Jason on 2016/11/19.
 */
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);

 

另外sublime還有自動輸入px可以轉rem的插件，在編寫css文件的時候自動轉換單位為rem，不過這樣，在以后修改或者改版的時候修改其中的一個參數我覺的還是很麻煩的。

不過有興趣的可以試試，畢竟比我們拿着一個計算器來切手機圖還是好很多的；

 

轉載請注明‘轉載於Jason齊齊的博客http://www.cnblogs.com/jasonwang2y60/’