postcss-pxtorem 比较适合移动端的适配

postcss-pxtorem概念？

postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。

在vue项目中如何使用

安装@5.1.1

npm install postcss-pxtorem --save-dev

安装依赖之后，将postcss-pxtorem的配置都放到了vue.config.js中

module.exports = {
    plugins: {
      autoprefixer: {},
      "postcss-pxtorem": {
        "rootValue": 75,//设置跟元素字体大小
        "propList": ["*"],//可以设置px更改成rem的属性
         "exclude"：/node_modules/i,//排除node_modules
         "selectorBlackList":[''vant-','my-'],//过滤到检测vant- my-
      }
    }
  }

新建rem.js

// 基准大小
const baseSize = 75 //跟postcss.config.js中rootValue的值是一致的
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + ‘px’
console.log(“fontsize”, document.documentElement.style.fontSize);
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}