使用 vue + vant 开发移动端网页

使用 vue + vant 开发移动端

移动端开发的时候我们通常需要进行适配，比如设计图宽度是 750px 我们为了适应不同的设备，需要将我们设计图上的 px 转为 视口单位 vw
这里我们采用 postcss-px-to-viewport

安装：

npm install postcss-px-to-viewport vant -S
1

新建 postcss.config.js

module.exports = ({ file }) => {
  // 判断是否是vant的文件，这里执行是对每一个样式文件都会执行转换，vant的设计稿是375的，需要单独处理
  // 下面可以使用 path.join 模块来进行抹平操作系统间的差异
  const filePath =
    process.env.NODE_ENV === 'production'
      ? '/node_modules/vant'
      : '\\node_modules\\vant'
  // 当前文件是否是vant 样式文件，是则使用vant设计稿宽度，否则使用自己设计稿宽度（我的是750）
  const width = file.includes(filePath) ? 375 : 750
  return {
    plugins: {
      autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
      'postcss-px-to-viewport': {
        unitToConvert: 'px', // 转换单位
        viewportWidth: width, // UI 计图宽度，每个文件可能不一致，所以这里用变量
        unitPrecision: 6, // 转换后的精度，即小数点位数
        propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
        viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
        fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
        selectorBlackList: ['ignore'], // 忽略的类，指定不转换为视窗单位的类名
        minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
        mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
        replace: true, // 是否转换后直接更换属性值
        exclude: [], // 忽略的文件，exclude: [/node_modules/], 用正则做目录名匹配
        landscape: false, // 是否处理横屏情况
      },
    },
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

propList: 当有些属性的单位我们不希望转换的时候，可以添加在数组后面，并在前面加上!号，如 propList: [“*”,“!letter-spacing”],这表示：所有 css 属性的属性的单位都进行转化，除了 letter-spacing 的

参考链接：

vue 移动端/pc 端适配插件：postcss-px-to-viewport

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

vant2 进阶用法

延伸：

vue 中使用 animate.css 实现动画效果