使用gulp将移动端xp转为rem

Posted 2020-08-20 Jason齐齐

使用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/’