0.0.1 • Published 6 years ago
gulp-rem-plugin v0.0.1
gulp-rem-plugin
将 px 转化成 rem 的 gulp 插件。
用 rem 来做响应式开发的时候,将 px 转换成 rem 值的时候,是每一个程序员头大的事情。
起初,我使用sublime的cssrem插件,效果挺好,避免了我重复使用小学学习的除法技能。但是,我们能感知的长度大小,还是像素,全部使用 rem 后,一旦设计稿有很多改动,你还知道有哪些 rem 不需要修改吗?
使用该插件后,源文件全部使用 px ,是不是又回到了做 pc 端页面的时代了?
使用方法
var gulp = require('gulp');
var rem = require('gulp-rem-plugin');
gulp.task('default', function() {
gulp.src('*.css')
.pipe(rem())
// .pipe(rem({'width_design':750,'valid_num':6,'pieces':10,'ignore_px':[1,2],'ignore_selector':['.class1']}));
});
参数说明
- width_design:设计稿宽度。默认值640
- valid_num:生成rem后的小数位数。默认值4
- pieces:将整屏切份。默认为10,相当于10rem = width_design(设计稿宽度)
- ignore_px:让部分px不在转换成rem。默认为空数组
- ignore_selector:让部分选择器不在转换为rem。默认为空数组
附加要求
使用 rem 来布局,需要你使用 js 来动态设置 html 的 font-size 值。根据你的参数 pieces 设置,font-size = device-width / pieces。来就是说,如果手机物理像素为320,那么 font-size:32px。
插件效果
安装方法
npm install gulp-rem-plugin --save-dev
0.0.1
6 years ago