gulp-px2rem-plugin 将px 转化为 rem
转化 plugin Gulp px rem
2023-09-11 14:22:18 时间
# px to rem
将 px 转化成 rem 的 gulp 插件。
### 使用方法
### 参数说明
width_design:设计稿宽度。默认值640
valid_num:生成rem后的小数位数。默认值4
pieces:将整屏切份。默认var gulp = require('gulp');
var px2rem = require('gulp-px2rem-plugin');
gulp.task('default', function() {
gulp.src('*.css')
.pipe(px2rem())
// .pipe(px2rem({'width_design':750,'valid_num':6,'pieces':10,'ignore_px':[1,2],'ignore_selector':['.class1']}));
});为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。
### 动态设置 html 的 font-size 值
(function () {
function resizeBaseFontSize() {
var rootHtml = document.documentElement,
deviceWidth = rootHtml.clientWidth;
if (deviceWidth > 640) {
deviceWidth = 640;
}
rootHtml.style.fontSize = deviceWidth / 7.5 + "px";
console.log(rootHtml.style.fontSize)
}
resizeBaseFontSize();
window.addEventListener("resize", resizeBaseFontSize, false);
window.addEventListener("orientationchange", resizeBaseFontSize, false);
})();
### 配置
gulp.task('css', function () {
var step = gulp.src([folder.src + "/css/*"], { sourcemaps: true })
.pipe(connect.reload())
.pipe(sass())
.pipe(postCss([autoPrefixer()]))
.pipe(px2rem())
.pipe(px2rem({'width_design':375,'valid_num':4,'pieces':10,'ignore_px':[1,2],'ignore_selector':['.class1']}));
if (environment == 'production') {
step.pipe(cleanCss())
}
step.pipe(gulp.dest(folder.dist))
return new Promise(function(resolve) {
resolve();
});
})
### 插件链接
https://www.npmjs.com/package/gulp-px2rem-plugin
相关文章
- 【C/C++学院】(8)全局函数和类成员函数转化/友元/操作符重载
- R语言:表格的线图转化
- 将ASP.NET用户控件转化为自定义控件
- Android 中像素px和dp的转化
- 粗糙的贝叶斯转化概率预测模型
- ipv4转化为ipv6
- xxx.forEach is not a function(DOM集合--类数组对象转化为数组)
- SwinTransformer模型转化:pytorch模型转keras。
- Python图像处理丨三种实现图像形态学转化运算模式
- 2212. 射箭比赛中的最大得分-动态规划算法-多背包问题转化
- 在POM配置Maven plugin提示错误“Plugin execution not covered by lifecycle configuration”的解决方案
- C#反序列化:xml转化为实体
- 使用pcl将bin文件转化为pcd文件
- 2023年后涨薪必备,如何从功能测试转化自动化测试?
- C#将枚举类型转化为字符串及枚举类型常用操作
- 【PyTorch】numpy数组与pytorch的tensor相互转化
- 〖全域运营实战白宝书 - 高转化文案速成篇②〗- 快速找到产品卖点的N个小技巧