Vue 移动端项目 | Vant组件库rem布局 一键生成

1.4 Vant 组件库的 rem 布局适配

如果需要使用 rem 单位进行适配，推荐使用以下两个工具：

• postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
• lib-flexible 用于动态设置 rem 基准值

详情请参考 Vant 的官方文档：Vant - Mobile UI Components built on Vue

#1.4.1 配置 postcss-pxtorem

1. 运行如下的命令：

   npm install postcss-pxtorem@5.1.1 -D
   

2. 在 vue 项目根目录下，创建 postcss 的配置文件 postcss.config.js，并初始化如下的配置：

   module.exports = {
     plugins: {
       'postcss-pxtorem': {
         rootValue: 37.5, // 根节点的 font-size 值
         propList: ['*'] // 要处理的属性列表，* 代表所有属性
       }
     }
   }
   

3. 关于 px -> rem 的换算：

   iphone6
   
   375px = 10rem
   37.5px = 1rem
   1px = 1/37.5rem
   12px = 12/37.5rem = 0.32rem
   

#1.4.2 配置 amfe-flexible

1. 运行如下的命令：

   npm i amfe-flexible@2.2.1 -S
   

2. 在 main.js 入口文件中导入 amfe-flexible：

   import 'amfe-flexible'
   

注意：当配置完 postcss-pxtorem 和 amfe-flexible 之后，要重启打包的服务器！