之前做移动端是用rem布局来做自适应，前博客有提到。就是把px 根据根元素转化为rem。
现在发现了一个新的技术方案。把px 转化为转换成viewport单位，是根据视图的宽高来计算。vw本质上还是一种百分比单位，100vw即等于100%，即window.innerWidth
用法如下：
一：安装
npm install postcss-px-to-viewport --save-dev
二：在vue的根目录下新建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", // 指定需要转换成的视窗单位，默认vwfontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vwselectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认falsereplace: true, // 是否转换后直接更换属性值exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配landscape: false // 是否处理横屏情况}}
}
完成之后，项目中的px 就会自动变为vw。
注意：由于移动端用的UI 框架为vant ，但是vant 设计的宽度为375 ，设计稿的宽度为750，这样用的话，会导致vant 的所有尺寸都会变小一倍。当然我们也可以把上面viewportWidth改为375，然后把UI 图除以2，然后计算。
当然，我们也可以根据不同的文件来适配不同的尺寸，vant 的适配375，自己写的适配750。
代码如下：
const path = require('path');module.exports = ({ file }) => {const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;return {plugins: {autoprefixer: {},"postcss-px-to-viewport": {unitToConvert: "px",viewportWidth: designWidth,unitPrecision: 6,propList: ["*"],viewportUnit: "vw",fontViewportUnit: "vw",selectorBlackList: [],minPixelValue: 1,mediaQuery: true,exclude: [],landscape: false}}}}