Vue移动端配置rem

在这边带大家如何在vue移动端项目中配置rem，这边分两种配置方法，一个是你自己手动换算进行计算换算，一个是使用插件来帮你换算，手动自己换算的话适合于Vue的各个版本，使用插件的我这边主要讲的是 Vite，至于其它自行百度

一、自己手动换算

自己手动换算的需要点数学基础，九年义务教育漏网之鱼就不是很建议选这个了

来到App.vue文件夹根标签 html 设置字体为 100px 并且层级设为最高，id app 字体设置为0.14rem，这样就换算好了，我这边换算的是100px等于1rem

在项目中我们需要手动自己把 px 全部换成 rem ，

！！这里要重点说一声，项目使用中必须将px全部换成rem，不然rem是不会生效的

二、使用插件自行换算

1、安装插件依赖

npm install postcss-pxtorem --save-dev
yarn add  postcss-pxtorem --save-dev


npm install amfe-flexible --save-dev
yarn add amfe-flexible --save-dev

2、配置

1、在mian.js中 引入amfe-flexible

import 'amfe-flexible'

2、在vite.config.js中配置postcss-pxtorem 

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import postCssPxToRem from "postcss-pxtorem"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 112.5, // 设计图最大宽度除以10  //比如750的宽就写成75  我这边是1125的宽
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
        })
      ]
    },
  }
})

3、测试rem

          写一个css样式

               接下来打开浏览器： 

可看到1125的宽占满全屏宽度，并且不会出现滑块，此时box的宽度为10rem，这就代表我们rem配置成功了。 

现在就可以根据设计稿的大小写样式啦，不用转换~~~ 设计稿的尺寸写的是多少直接C/V过来就好了，不需要转换更改