1.安装
npm i lib-flexible-computer -S
npm i postcss-pxtorem -S //将代码中px自动转化成对应的rem的一个插件
2.在vue.config.js中适配，以5120*1440分例子
方式1：rootValue:5120/10
在main.js中引入
// 自适应不同分辨率
import "lib-flexible-computer";
方式2：rootValue: 16 * (5120 / 1920)
不需要引入lib-flexible-computer
方式3：rootValue: 16
需要在公共样式中加入,此处会出现滚动条【方法有待验证】
body {
width: 5120px;
font-size: 16px;
// border: 1px solid blue;
}
module.exports = {
publicPath: "./", //配置项目路径
outputDir: "dist", //输出目录
lintOnSave: false, //是否打开eslint
css: {
loaderOptions: {
postcss: {
postcssOptions: {
plugins: [
require("postcss-pxtorem")({
//这里是配置项，详见官方文档
rootValue:16, //用于指定根元素的字体大小，以便计算rem单位
// rootValue:512, //用于指定根元素的字体大小，以便计算rem单位
// rootValue: 16 * (5120 / 1920), //用于指定根元素的字体大小，以便计算rem单位
propList: ["*"], // 需要转换的属性，*表示所有属性都需要转换
exclude: ["node_modules"], //转换的时候排除
// unitPrecision: 5,
// selectorBlackList: [], // 需要忽略的选择器，例如['.ignore']表示不转换.ignore类下的样式
// replace: true,
// mediaQuery: false,
// minPixelValue: 2, // 小于2px的样式不进行转换
}),
],
},
},
},
},
};
注意版本号：
image.png
