上代码
// 下载依赖
npm i lib-flexible
npm i px2rem-loader
// 如果报错显示找不到模块现下载面的这个依赖
npm i postcss-px2rem
// 找到源点html删除下面这句话
<meta name="viewport" content="width=device-width, initial-scale=1.0">
main.js
// 引入
import 'lib-flexible'
vue.config.js // 中配置
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
// 以设计稿750为例, 750 / 10 = 75
remUnit: 75
}),
]
}
}
},
};
// 适配大屏
// ./node_modules/lib-flexible/flexible.js,找到源码
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = 540 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
// 修改成为
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;
}