vue3+vite项目移动端适配：postcss-pxtorem和amfe-flexible

一，定义

postcss-pxtorem

PostCSS 的一个插件，可以从像素单位生成 rem 单位。

amfe-flexible

amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。

二，使用

1. 设置 viewport

在 index.html 中：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

2.安装插件

npm install amfe-flexible --save
npm install postcss-pxtorem --save

3.配置文件

Vite自身已经集成PostCSS，因此无需单独创建PostCSS配置文件，可直接在 vite.config.js 文件中配置css.postcss选项。

import postCssPxToRem from "postcss-pxtorem";
export default defineConfig({
    plugins: [vue()],
    css: {
	    postcss: {
	      	plugins: [
	        	postCssPxToRem({
	          		rootValue: 75, // 1rem，根据 设计稿宽度/10 进行设置
	          		propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
	        	})
	      	]
	    }
    },
})

4. 导入

在 main.js 中引入 amfe-flexible 插件：

import 'amfe-flexible';

三，安装后效果如图：