vue3移动端rem适配（amfe-flexible + postcss-pxtorem）

前言：

        移动端适配，之前自己就稍微了解了一下，知道是采用rem来做，但是具体怎么实现确实没有头绪，今天自己稍微做了一个demo试了一下，也将自己对上述插件的作用写出来，希望能帮助到其他人。

插件：

        首先rem的概念是根据根元素的font-size大小来调整大小的，那么我们在平常开发项目中一般是以px为单位的，但是在不同的设备上它的高宽是不一样的，如果采用固定的px来做，会导致效果不能统一，那么上述两个插件可以帮我们解决上述问题。

        postcss-pxtorem: 这个插件就是将我们的在css中写的固定的px自动转换为rem，那么这个转换的比例是多少呢？，转换比例是需要我们在构建工具中配置的（我以vite为例子）,按照下图的设置，160px就会被转换为10rem

// 移动端rem适配相关
import pxtorem from "postcss-pxtorem";  

css: {
    postcss: {
      plugins: [
        pxtorem({
          // 这里写设计稿的宽度/10即可，例如设计稿宽度是750px就写75
          rootValue: 16,
          // 需要转换的属性，默认转换所有属性
          propList: ["*"],
        }),
      ],
    },
  },

        amfe-flexible: 关于px转换为rem的问题我们解决，但是这个根元素的font-size怎么办呢？， 这就需要我们的amfe-flexible插件了，根据我的测试，它会自动根据设备大小，动态的改变body的font-size值

// 在main.js中引入即可
// 根据设备大小自动调整font-size（再结合postcss插件实现自适应）
import 'amfe-flexible'

结语：

        关于适配问题，借助插件确实很方便就解决了，并且经过测试没有啥问题