vue vant移动端 rem 适配

如果是做 PC 端的网页，无需做 rem 适配，但是做 H5 开发，rem 是需要做一下的，Vant 官方也为我们提供了方案，如下图所示：

image.png

咱们就按照官方为我们提供的方案进行适配，安装它们：

yarn add lib-flexible -S
yarn add postcss-pxtorem -D

//这里 lib-flexible 是网页做 html 的 font-size 适配用的，所以需要安装到 
<br/>//dependencies。而 postcss-pxtorem 是在编译的时候对 px 单位转
<br/>//换为 rem 单位时使用，所以安装到 devDependencies 便可。

安装好后，我们需要在 main.js 引入 lib-flexible，新增如下代码：

import { createApp } from 'vue'
import { Button } from 'vant';
import 'lib-flexible/flexible'
import App from './App.vue'
import router from './router'
import 'vant/lib/index.css'; // 全局引入样式
import './index.css'

const app = createApp(App) // 创建实例

app.use(Button) // 注册组件
app.use(router)

app.mount('#app')

接着我们需要为 px 单位转 rem 单位做配置。

起初我犯了一个错误，在根目录声明 .postcssrc.js 文件，但是目前 Vite 创建的项目已经不支持这种形式的配置文件了，而是需要 postcss.config.js 文件，配置内容如下：

// postcss.config.js
// 用 vite 创建项目，配置 postcss 需要使用 post.config.js，之前使用的 .postcssrc.js 已经被抛弃
// 具体配置可以去 postcss-pxtorem 仓库看看文档
module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      rootValue: 37.5, // Vant 官方根字体大小是 37.5
      propList: ['*'],
      selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
    }
  }
}

给 src/views/Home.vue 文件里的 div 一个样式，检查一下 rem 适配是否成功：

<template>
  <div class="demo">我是十四</div>
  <van-button type="primary" size="large">大号按钮</van-button>
</template>

<script>
export default {
}
</script>

<style scoped>
.demo {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
}
</style>

image.png

如若是上图所示，说明配置已经生效了。

这里还有一个需要注意的小知识点：不需要 px 转 rem 的情况，可以使用大写的 PX 作为单位。

编译时不会将其转化为 rem 单位，也可以通过 selectorBlackList 属性声明的 .norem 前缀的 class 类名，同样也不会被转化。