Vue第16篇，Vue使用rem实现移动端适配，移动端rem适配（rem移动端适配，vue移动端适配）

前言：在移动端使用 REM（Root EM）适配是一种常见的响应式布局方案，它可以根据屏幕尺寸动态调整元素的大小，以适应不同的设备和分辨率。这里来记录一下

---

Vue.js ～ 第 16 篇    ——    Vue使用rem实现移动端适配

如何在vue项目中，使用rem进行移动端适配？

一. 首先需要安装第三方插件，这是我们使用自动将 px 单位转化为 rem 单位的插件，命令如下

//可以将 px 单位自动转化为 rem 单位
npm install postcss --save-dev 
npm install postcss-pxtorem@5.1.1 --save-dev

//还需要安装 amfe-flexible，安装引入后，单位转化才可以使用
npm i amfe-flexible --save

1. 命令含义

•        --save-dev 是安装在开发环境下，项目打包的时候 不会被打包进dist文件夹；

•        --save 的意思是安装在生产环境下，项目打包的时候 会被打包进dist文件夹。

安装完这三个插件，px才能自动的转化为rem ，这些工具帮助我们自动实现移动端

适配。

---

二. 在 main.js 中引入 amfe-flexible

import Vant from "vant"; // 整体导入vant组件库
import "vant/lib/index.css"; // 引入vant样式表

//引入rem转化工具
import "amfe-flexible"; 

---

三. 然后在根目录下创建一个postcss.config.js文件，该文件项目启动后会自动运行

module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    "postcss-pxtorem": {
      rootValue({ file }) {
        // 判断是否是vant的文件，如果是就使用 37.5为根节点字体大小
        // 否则使用75 因为vant使用的设计标准为375，但是市场现在的主流设置尺寸是750
        return file.indexOf("vant") !== -1 ? 37.5 : 75;
      },
      // 配置哪些文件中的尺寸需要转化为rem *表示所有的都要转化
      propList: ["*"],
    },
  },
};

配置完成后需要重新启动项目，方能生效。