如果使用Vue进行移动端页面的开发，需要对不同机型的宽高进行适配。最常用的方法是使用amfe-flexable和postcss-pxtorem这两个插件来帮助进行适配。
amfe-flexable
amfe-flexable是阿里发布的一套可伸缩适配方案。它能根据设备的宽高来设置页面body元素的字体大小，将1rem设置为设备宽度/10以及在页面大小转换时可以重新计算这些数值。
具体可见github连接：https://github.com/amfe/lib-flexible
postcss-pxtorem
postcss-pxtorem是postcss的一个插件，可以将对应的像素单位转换为rem。在vite中可以直接对其进行配置，因为vite已经集成了postcss。
其中最重要的配置属性为：
- rootValue：根元素的值，即1rem对应的像素值大小。一般设置为设计稿尺寸/10
以及一些其他属性：
- propList：需要进行转换的css属性的值，可以使用通配符。如：
*意思是将全部属性单位都进行转换；["*position*"]会匹配到background-position-y - selectorBlackList：不进行单位转换的选择器。如设置为字符串
body，则所有含有body字符串的选择器都不会被该插件进行转换；若设置为[/^body$/]，则body会被匹配到而不是.body - exclude：不需要进行单位转换的文件
- mediaQuery：是否允许像素在媒体查询中进行转换
在Vite中进行配置使用
插件安装
//npm方式 npm install postcss-pxtorem --save-dev npm install amfe-flexible --save-dev //pnpm方式 pnpm add postcss-pxtorem -D pnpm add amfe-flexible -D
在main.ts中引入：
import 'amfe-flexible'
可以看到，html元素的字体大小被设置为**设备宽度/10，**证明amfe-flexible配置成功：
在vite.config.js中配置postcss-pxtorem：
import postCssPxToRem from "postcss-pxtorem"
...
export default defineConfig({
...
css: {
postcss: {
plugins: [
postCssPxToRem({
rootValue: 16, // 1rem的大小
propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
})
]
}
},
...
})
这里本来设置el-input元素的宽度为350px，但是使用了postcss-pxtorem之后会将px转换为rem，参照的基准就是rootValue，所以此处得到350/37.5=9.333…rem：
由于rootValue是固定的，所以元素计算出来的rem单位也是一个固定的值（如上例的9.33）。但是在amfe-flexable会计算不同宽高设备的元素的根字体大小，所以每次都能计算得到一个适配的宽高。如上例中，9.333rem在iPhone X（375812）中会被计算为9.333*37.5：
但是在iPhone 8 Plus（414736）中，同样是9.333rem，这个元素的宽度被计算为9.333*41.4：
这样，我们就可以按照设计稿给出的像素尺寸进行开发，而在不同的移动设备上进行适配了。