vue-cli3 PC端实现适配(flexible.js+postcss-px2rem)
1、安装
npm install postcss-px2rem
npm install lib-flexible -S
2、配置
vue.config.js 添加配置
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 192, //根据视觉稿,rem为px的十分之一
})
]
}
}
},
3、在main.js中引入文件
import 'lib-flexible'
4、找到\node_modules\lib-flexible\flexible.js
5、修改成
function refreshRem(){
var width = docEl.getBoundingClientRect().width
if (width / dpr > 540) {
width = width * dpr
}
//缩放比例,可按实际情况修改
var rem = width / 8
docEl.style.fontSize = rem + 'px'
flexible.rem = win.rem = rem
}
6、样式不被转化,只需要在样式后面添加/no/换或者PX大写
border: 1px solid red