rem 相关配置

一、 安装插件

• 这我们使用自动将 px 单位转化为 rem 单位的插件
• 安装命令npm install postcss --save-dev , npm install postcss-pxtorem@5.1.1 --save-dev 可以将 px 单位自动转化为 rem 单位

注：

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

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

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

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

二、引入插件

• 在 main.js 中引入 amfe-flexible

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Vant from "vant"; // 整体导入vant组件库
import "vant/lib/index.css"; // 引入vant样式表
import "amfe-flexible"; //rem转化的工具
createApp(App).use(store).use(router).use(Vant).mount("#app");

三、创建postcss.config.js

• 在项目根目录下创建一个 postcss.config.js

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