1、以1920* 1080的设计稿为例，实现PC端不同分辨率适配
2、安装依赖 npm install 下面的依赖
"devDependencies": {
"postcss-px2rem": "^0.3.0",
"px2rem-loader": "^0.1.9",
}
2.将html fontSize 转为 rem 创建 rem.js 文件
utils/rem.js 文件代码如下：
// rem等比适配配置文件
// 基准大小 和 vur.config.js 中 css 插件设定基准值保持相同
const baseSize = 16;
// 设置 rem 函数
function setRem() {
// 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 1920;
// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
document.documentElement.style.fontSize = `${baseSize * Math.min(scale, 2)}px`;
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
// eslint-disable-next-line func-names
window.onresize = function () {
setRem();
};
3.在 main.js 中引入 rem.js
import './utils/rem';
4.配置 vue.config.js (vue-cli3中）
引入 const px2rem = require('postcss-px2rem');
配置css 插件
css: {
sourceMap: true,
extract: process.env.NODE_ENV === 'production' ? {
ignoreOrder: true,
} : false,
loaderOptions: {
postcss: {
plugins: [
px2rem({
// 基准大小 baseSize，需要和rem.js中相同
remUnit: 16,
}),
// autoprefixer(),
],
}
},
},
