使用 vue + vant 开发移动端
移动端开发的时候我们通常需要进行适配，比如设计图宽度是 750px 我们为了适应不同的设备，需要将我们设计图上的 px 转为 视口单位 vw
这里我们采用 postcss-px-to-viewport
安装：
npm install postcss-px-to-viewport vant -S
新建 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, // 是否处理横屏情况
},
},
}
}
propList: 当有些属性的单位我们不希望转换的时候，可以添加在数组后面，并在前面加上!号，如 propList: [“*”,“!letter-spacing”],这表示：所有 css 属性的属性的单位都进行转化，除了 letter-spacing 的
参考链接：
vue 移动端/pc 端适配插件：postcss-px-to-viewport
延伸：
