vant3 Viewport 布局

查看官方文档

进阶用法 (opens new window)

按官方文档配置

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
}

查看 vant3 源码，发现字体大小己经转换成 vw 单位了。

在 ipad-mini 下预览效果：

按照网上的方法配置

// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 要转化的单位
      viewportWidth: 750, // 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: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
      landscape: false, // 是否处理横屏情况
    },
  },
}

由于排除了 node_modules 目录 可以看到字体单位没有被转换，还是 vant3 默认的 px。

在 ipad-mini 下预览效果（可以看出没有自适应）：

官网的特意说明

带出的问题？？？

在设计稿是 750px 下如何使 vant3 也自适应？

如果按照上面网上的配置，显然并不能使 vant3 自适应，而且官方文档也标注了，应避免 ignore node_modules 目录。
但是如果不排除 node_modules 目录。直接设置 'viewportWidth: 750'

那么 vant 的样式会很难看。如下图：

对比直接设置成 'viewportWidth: 375'

正常的 vant3 样式如下，可以看出 vant3 的设计稿是 375 的

解决方案

经过 gg 搜索 “vant3 设计稿 750” 排在第一位的就要我要找的问题：

链接在这里，直接跳到解决方案：设计稿是 750px，根元素应该设置 75，但是 vant 转换后好小，要改成 35 才行 (opens new window)

下面是代码：

// postcss.config.js
const join = require('path').join
const tailwindJS = join(__dirname, 'tailwind.js')
module.exports = ({ file }) => {
  let vwUnit // 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试
  if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
    vwUnit = 375
  } else {
    vwUnit = 750
  }
  return {
    plugins: [
      require('tailwindcss')(tailwindJS),
      require('postcss-px-to-viewport')({
        viewportWidth: vwUnit,
        unitPrecision: 3,
        viewportUnit: 'vw',
        selectorBlackList: ['.ignore', '.hairlines'],
        minPixelValue: 1,
        mediaQuery: false,
      }),
    ],
  }
}