vue 项目自适应 配置 px转rem 的插件postcss-pxtorem

1、安装

npm i postcss-plugin-px2rem --save -dev --force

2. 找到 postcss.config.cjs 没有的话就新建一个

module.exports = {plugins: {// to edit target browsers: use "browserslist" field in package.jsonautoprefixer: {},"postcss-plugin-px2rem": {rootValue: 16, // 设计稿宽度的 1/10propBlackList: ["border","border-top","border-left","border-right","border-bottom",], // 不需要转换为 rem 单位的 CSS 属性},},
};

3. 在src->utils->新建文件rem.js

// 基准大小
const baseSize = 16;
// 设置 rem 函数
function setRem() {// 当前页面宽度相对于 1920 宽的缩放比例，可根据自己需要修改。const scale = document.documentElement.clientWidth / 1920;// 设置页面根节点字体大小document.documentElement.style.fontSize =baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function() {setRem();
};

4. main.js中引入rem.js

import './utils/rem.js' // 缩放自适应

如果报错
安装autoprefixer

npm i autoprefixer

根目录下文件里面postcss.config.cjs

module.exports = {plugins: {autoprefixer: {}}
};