vue+rem+postcss-pxtorem 屏幕适配

创建 rem.js

const baseSize = 37.5; // 
function setRem() {
  // 实际设备页面宽度和设计稿的比值
  const scale = document.documentElement.clientWidth / 375;
  // 计算实际的rem值并赋予给html的font-size
  document.documentElement.style.fontSize = (baseSize * scale) + 'px';
}
setRem();
window.addEventListener('resize', () => {
  setRem();
});

安装postcss-pxtorem
https://github.com/cuth/postcss-pxtorem
npm install postcss postcss-pxtorem --save
注意：权重
vue.config.js > postcssrx.js > postcss.config.js
创建postcss.config.js

module.exports = {
    plugins: {
     'postcss-pxtorem': {
      rootValue: 37.5,
      minPixelValue: 2,
      propList: ['*'], //*所有都换
     }
    }
   }

• rootValue(Number | Function) 表示根元素字体大小或根据input参数返回根元素字体大小
• unitPrecision（数字）允许 REM 单位增长到的十进制数字。
• propList（数组）可以从 px 更改为 rem 的属性。
  • 值需要完全匹配。
  • 使用通配符*启用所有属性。例子：['*']
  • *在单词的开头或结尾使用。（['*position*']将匹配background-position-y）
  • 用于!不匹配属性。例子：['*', '!letter-spacing']
  • 将“not”前缀与其他前缀组合。例子：['*', '!font*']