vue项目rem适配方案 过滤vant UI

1、安装 postcss-pxtorem

yarn add postcss-pxtorem -D 

2、配置.postcssrc.js （postcssrc.config.js）

module.exports =  {
  "plugins": {
    "postcss-pxtorem": {
      rootValue: 32,   // 换算的基数(设计图750的根字体为32)
      propList: ['*'],  // 要转换的匹配项
      selectorBlackList: ['.van']  // 忽略转换
    },
  }
}

3、不同尺寸适配

新建rem.js,并引入到main.js

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

main.js
import '@/assets/js/rem'