vue中自适应rem的设置及vant组件库px自动修改为相对大小的方法两则（postcss-pxtorem和postcss-px-to-viewport）

一、vue中自适应rem的设置

新建文件src/libs/rem.js

function setRem() {
    // 750px为设计稿视口宽度 字体大小默认18px;
    const screenWidth = 750
    const scale = screenWidth / 18
    const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
    // 得到html的Dom元素
    const htmlDom = document.getElementsByTagName('html')[0]
    // 设置根元素字体大小
    htmlDom.style.fontSize = htmlWidth / scale + 'px'
  }
  // 初始化
  setRem()
  // 改变窗口大小时重新设置 rem
  window.onresize = function() {
    setRem()
  }

以后中所有宽度和大小都用rem表示，不要写px，如果非要写px，可以在vscode下载px to rem组件，写px会自动转换成rem。

最后在main.js或在APP.vue中引入import '@/libs/rem.js'

二、vant组件库px自动修改为相对大小的方法两则（postcss-pxtorem和postcss-px-to-viewport）

在使用vant组件时，vant采用的都是px的绝对宽度，其设计稿是视口宽度为375px作为基准值。我们在开发时，为了自适应宽度，往往采用rem或vm或百分比等相对单位作为宽度。但vant组件写死了，我们如何在代码中不修改vant原生的style，也能让页面在运行时做到自适应变化呢。

方法1：采用postcss-pxtorem组件

步骤1：

npm i postcss-pxtorem --save -dev

步骤2：

在根目录下新建文件  .postcssrc.js，内容如下：

module.exports = {
    plugins: {
      'autoprefixer': {
        browsers: ['Android >= 4.0', 'iOS >= 8']
      },
      'postcss-pxtorem': {
        rootValue: 9,
        propList: ['*']
      }
    }
  }

本方法主要将vant组件原px转化成rem表示的视口大小。注意，这 rootValue: 9是有讲究的，vant中原设计稿为375px，而本项目为750px，比例关系为1：2,所以如果本设计稿中18px表示1rem，则vant设计稿如果要表示本设计稿1rem的宽度要用9px，因此这里rootValue填9，表示本项目所有用到px的地方，要按照9px=1rem进行缩放。

方法二：采用postcss-px-to-viewport组件

步骤1：

npm i postcss-px-to-viewport --save -dev

步骤2：

在根目录下新建文件  .postcssrc.js，内容如下：将vant组件库中px大小转换为vw相对大小，vant组件库中是按照375px=100vm来的，这里只要将viewportWidth设为375，则项目中所有用px表示的地方（也就vant组件库使用了，自己写的css部分都用的rem表示宽度），都等比例缩放自适应当前屏幕宽度

module.exports = {
    plugins: {
      'autoprefixer': {
        browsers: ['Android >= 4.0', 'iOS >= 8']
      },
        "postcss-px-to-viewport": {
                unitToConvert: "px", // 要转化的单位
                viewportWidth: 375, // UI设计稿的宽度
                unitPrecision: 6, // 转换后的精度，即小数点位数
                propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
                viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
                fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
                selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
                minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
                mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
                replace: true, // 是否转换后直接更换属性值
                exclude: [], // 设置忽略文件，用正则做目录名匹配
                landscape: false // 是否处理横屏情况
              }
    }
  }