vue 项目自适应 配置 px转rem 的插件postcss-pxtorem
1、安装
npm i postcss-plugin-px2rem --save -dev --force
- 找到 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 属性},},
};- 在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();
};
- main.js中引入rem.js
import './utils/rem.js' // 缩放自适应如果报错 
安装autoprefixer
npm i autoprefixer
根目录下文件里面postcss.config.cjs
module.exports = {plugins: {autoprefixer: {}}
};