amfe-flexible 和 postcss-pxtorem 可以一起使用来实现移动端的适配效果。
amfe-flexible 主要用于动态设置根元素字体大小（rem），以根据屏幕尺寸进行自适应布局。它会根据设备的屏幕宽度计算出根元素字体大小，并将其设置为页面的根元素的字体大小。然后，开发者可以在 CSS 样式中使用 rem 单位来设置元素的尺寸和间距，从而实现自适应布局。
postcss-pxtorem 是一个 PostCSS 插件，用于将 CSS 中的像素单位（px）转换为 rem 单位。它会在构建过程中自动分析 CSS 文件，将指定的像素值转换为相应的 rem 值，以适应动态设置的根元素字体大小。
配置 amfe-flexible
配置 amfe-flexible 非常简单，只需要安装引入一下即可
安装 amfe-flexible
npm install amfe-flexible --save
###在 main.js 引入
import 'amfe-flexible'
配置 postcss-pxtorem
配置 postcss-pxtorem 也不难，只需要安装在 vite.config.js 配置一下就行
安装
npm install postcss postcss-pxtorem --save-dev
vite.config.js 配置
import pxtorem from 'postcss-pxtorem';
export default defineConfig({plugins: [vue()],css: {postcss: {plugins: [pxtorem({rootValue: 75, // 这里写设计稿的宽度/10即可，例如设计稿宽度是750px就写75// vant默认是37.5，如果是使用了vant的话可以像下面这样写// rootValue(res) {// return res.file.indexOf("vant") !== -1 ? 37.5 : 75;// },propList: ['*'], // 需要转换的属性，默认转换所有属性selectorBlackList: [] // CSS选择器黑名单，防止部分选择器被转换exclude: /\/node_modules\//i, // 忽略包文件转换rem})]}}
});
出现的问题
一、打包后 postcss-pxtorem 失效
第一次打包没问题，后面再打包 postcss-pxtorem 就失效，不会转变 px 为 rem 了
按下面步骤解决(一次性)，没比较好的解决办法，有大佬知道可以说下
- 清理缓存
npm cache clean --force
-
删除依赖
删除 dist 打包文件夹和 node_modules 依赖文件夹
-
安装依赖
npm install
- 重新打包
不同尺寸效果图
参考
vite + vue3 使用 postcss-pxtorem 适配移动端
移动端—在 vant 中使用 postcss-pxtorem 和 lib-flexible 实现 rem 布局适配
