移动端适配：px-to-viewport(兼容vant)

配置完成之后，单位px将自动转换为视口单位（vw，vh，vmin，vmax） 说明：

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值

安装

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

默认配置

module.exports = {
  // 以下是选项默认值
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // (String) 需要转换的单位,默认为px
      viewportWidth: 320, // (Number)视窗的宽度，对应的是我们设计稿的宽度，一般是750
      unitPrecision: 5, // (Number) 单位转换后保留的小数位
      propList: ['*'], // (Array) 指定可以转换的css属性，默认是['*']，代表全部属性进行转换
      viewportUnit: 'vw', //  (String)指定需要转换成的视窗单位，默认vw
      fontViewportUnit: 'vw', // (String)指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: [], // (Array) 指定不转换为视窗单位的类，保留px，值为string或正则regexp
      minPixelValue: 1, // (Number) 默认值1，小于或等于`1px`不转换为视窗单位
      mediaQuery: false, // (Boolean) 是否在媒体查询时也转换px，默认false
      replace: true, // (Boolean)替换包含vw的规则
      exclude: [], // (Array or Regexp) 设置忽略文件，如node_modules - [/^node_modules$/]
      landscape: false, // (Boolean) @media (orientation: landscape)与通过转换的值相加landscapeWidth
      landscapeUnit: 'vw', // (String) 横屏时使用的单位
      landscapeWidth: 568 // (Number) 横屏时使用的视口宽度
    }
  }
}

配置参考

在项目根目录下添加 postcss.config.js 文件

module.exports = {
    plugins: {
      "postcss-px-to-viewport": {
        viewportWidth: 750,
        unitPrecision: 5,
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: false
      }
    }
};

分隔线 ---- 以下为兼容 vant 配置

vant 问题

1. 在项目中引入 vant ，会发现 vant 组件变得很小；
2. 看vant官网的demo vant-demo 发现有这么一段配置：

   const autoprefixer = require('autoprefixer');
    const pxtoviewport = require('postcss-px-to-viewport');

    module.exports = {
      outputDir: 'dist',
      publicPath: process.env.NODE_ENV === 'production' ? '/vant-demo/' : '/',
      css: {
        loaderOptions: {
          postcss: {
            plugins: [
              autoprefixer(),
              pxtoviewport({
                viewportWidth: 375
              })
            ]
          }
        }
      }
    };

3. 问题所在： vant 使用宽度 375px 的设计稿做的。

适配 vant 的配置方案1

视口宽度设置 750，并在 selectorBlackList 配置 vant 类名黑名单

module.exports = {
  plugins: {
    "postcss-px-to-viewport": {
      viewportWidth: 750,
      unitPrecision: 5,
      viewportUnit: "vw",
      fontViewportUnit: "vw",
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      selectorBlackList: [
        ".van-cell",
        ".van-button",
        ".van-skeleton",
        ".van-toast",
        ".van-popup__close-icon",
        ".van-field",
        ".van-dropdown-menu",
        ".van-radio",
        ".van-swipe",
        ".van-list",
        ".van-dialog"
      ]
    }
  }
};

适配 vant 的配置方案2

方案1有一个弊端，就是每次用到一个vant的组件就要去配置一次黑名单

解决方案：module.exports 使用函数的方式，判断文件包含 vant 的时候设置 viewportWidth 为 375，否则设置为750 。

module.exports = ({ file }) => {
  return {
    plugins: {
      "postcss-px-to-viewport": {
        viewportWidth:
          file && file.dirname && file.dirname.includes("vant") ? 375 : 750,
        unitPrecision: 5,
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: false
      }
    }
  };
};

这样就完美解决移动端以及vant的适配问题了。