npm i lib-flexible -S
postcss-plugin-px2rem
在main.js中引入
import 'lib-flexible/flexible.js'
找到node_modules里找到lib-flexible,修改flexible.js
搜索540找到refreshRem函数修改
function refreshRem() {var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) {// width = 540 * dpr;width = width * dpr;}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;
}
在vue.config.js配置如下(没有这个文件就新建)
module.exports = {css: {loaderOptions: {postcss: {plugins: [require("postcss-plugin-px2rem")({// 在这里,由于我的设计稿尺寸的屏幕分辨率是1920,具体原因如下:rootValue: 192, // 设计稿尺寸/10}),],},},},
}
重启就可以了
npm i px2rem-loader -D // 已下应该没用上