适用于以px为单位的可视化大数据自动转为rem,其他页面自行调试对比
安装依赖:
npm i lib-flexible -S
npm i px2rem-loader -D
将node_modules/lib-flexible/flexible.js文件复制到utils文件下,然后在main.js中按路径引用
import './utils/flexible'
要做到根据屏幕尺寸自适应,将复制的js文件中540改成width即可
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
// width = 540 * dpr; 540
width = width * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
在vue.config.js中配置px2rem-loader
chainWebpack: config => {
config.module
.rule("css")
.test(/\.css$/)
.oneOf("vue")
.resourceQuery(/\?vue/)
.use("px2rem")
.loader("px2rem-loader")
.options({
// 设置px转化为rem比例,设计稿大小为1920,比例 1920/ 10
remUnit: 192
});
},
配置完成重启项目即可