Vue3（vue版本3.2.47）关于移动端的适配

1.两个依赖

amfe-flexible v2.2.1（生产使用）

npm i -S amfe-flexible

postcss-pxtorem v6.0.0(开发使用)

npm install postcss-pxtorem --save-dev

2.下载后引入，并且配置

import 'amfe-flexible' // main.js中导入

在项目根目录新建 postcss.config.js

// postcss.config.js
module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue: 75
            propList: ['*'], // 需要转换的css属性，默认*全部
        }
    }
}

3.在根目录的index.html 中加入手机端适配的meta代码

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

4.关于设计稿(rootValue 的值)

如果你的设计稿是750px的，那么rootValue 的值就是 75 ，750/10。

为什么是除以10，是因为amfe-flexible将根元素的字体设置为了37.5 ，而屏幕的宽度是375，是屏幕分辨率的十分之一

如果你项目使用了vant，那么rootValue 的值就是37.5，因为vant是以375px的设计稿。

如果你用了vant，同时你的设计稿是750px的，要么自己量出来的尺寸除以2，要么找ui上缩小0.5倍。

我们编写样式的时候就使用px来写，量多少写多少（注意设计稿尺寸）