移动端vw适配记录

1、安装postcss-px-to-viewport插件；
2、项目下新建postcss.config.js文件，修改内容如下：

module.exports = {
    plugins:{
        'postcss-px-to-viewport':{
           unitToConvert:'px', // 要转换的单位
           viewportWidth: 750, // 设计稿的尺寸
           unitPrecision: 6, // 转换后的精度，即小数点位数       
           propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换     
           viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw       
           fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位    
           selectorBlackList: ["wrap"],
           minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换       
           mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false      
           replace: true, // 是否转换后直接更换属性值       
           exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配  
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3、适配第三方ui库，解决项目设计稿尺寸与ui库基于尺寸不一致的问题; 例如 自己项目是750设计稿，使用基于375来开发的vant库。
动态设置视口宽度

const path = require('path');

module.exports = ({ webpack }) => {
  const viewWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750;
  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
        unitToConvert: "px",
        viewportWidth: viewWidth,
        unitPrecision: 6,
        propList: ["*"],
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: true,
        exclude: [],
        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

关键判断

const viewWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750
1