简介
前端页面移动端免不了需要自适应高度宽度字体大小等等,如果直接写rem的话那会很麻烦,前端还需要根据设计图自己去转rem写样式,那样会非常麻烦且不易维护。本文将介绍前端写px像素单位自动转为rem单位。
步骤
一、安装组件
npm install --save postcss-px2rem-exclude
npm install --save lib-flexible
再main.js中引入
import 'lib-flexible'
安装完成后配置postcss,在这里如果使用在vue.config.js中配置则会导致使用的ui库中的属性也会改变,所以在这里安装的是postcss-px2rem-exclude ,配置文件则在packge.json中。
在packge.json中添加以下内容
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px2rem-exclude": {
"remUnit": 200,
"exclude": "/node_modules|floder_name/i"
}
}
}
之后在node_modules->lib-flexible->flexible.js 中将函数refreshRem的内容换成以下内容:
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr < 1980) {
width = 1980 * dpr;
} else if (width / dpr > 5760) {
width = 5760 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
其他
如果出现字体过小的问题,建议在App.vue的全局样式中设置