一、postcss-pxtorem装置
npm install -S postcss-pxtorem
二、rem 配置
## rem.jsfunction setRem() { `// 基准大小 const baseSize = 100; const baseScale = baseSize / 1920; // 1920的设计图 let widthScale = window.innerWidth; // 以后窗口的宽度 const heightScale = window.innerHeight; // 以后窗口的高度 // 尺寸换算 const comparedHeight = (widthScale * 1080) / 1920; if (heightScale < comparedHeight) { widthScale = (heightScale * 1920) / 1080; } // 计算理论的rem值,失去该宽度下的相应font-size值,并赋予给html的font-size, const rem = widthScale * baseScale; document.documentElement.style.fontSize = ${rem}px;}// 初始化setRem();// 扭转窗口大小时从新设置 remwindow.onresize = () => { setRem();};`
三、在main.js外面引入
import './utils/rem';
四、配置postcss-pxtorem
### 根目录的postcss.config.js`module.exports = { plugins: { autoprefixer: {}, 'postcss-pxtorem': { rootValue: 100, minPixelValue: 12, propList: ['*'], exclude: (e) => { if (/src(\\|\/)views(\\|\/)Screen/.test(e)) { return false; } return true; }, }, },};`
五、疏忽单个属性的形式（不转换rem）
1、配置propList: ['*', '!border', '!font-size'], 2、像素单元申明中应用大写 .rank-list__text { width: 300Px; }
六、参考文档
1、https://www.npmjs.com/package/postcss-pxtorem2、https://www.njleonzhang.com/2018/08/15/flexible-pc-full-screen.html3、https://www.cnblogs.com/WhiteM/p/12720849.html