移动端Vant组件库REM适配

REM适配

基础配置

在页面布局之前,对REM进行配置,以适配移动端特点。

官方参考 Vant文档---->快速上手---->进阶用法---->Rem适配---->

Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具：

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

postcss-pxtorem

postcss-pxtorem 是一款 postcss 插件，用于将px单位转化为 rem。

使用步骤 ：

1. 安装：

   npm i -D postcss-pxtorem
   

2. 配置 postcss.config.js

   module.exports = {
     plugins: {
       autoprefixer: {},
       'postcss-pxtorem': {
         // 根值：默认是37.5，来自于设计稿大小的10分之一
         rootValue: 37.5, // 根植
         propList: ['*']
       }
     }
   }
   

提示：

此时重启服务(npm run serve)，发现页面中的px单位会自动转换成rem单位。

注意：

rem单位值 = px像素值 / rootValue。

lib-flexible

lib-flexible 用于设置 rem 基准值，也就是设置font-size。

使用步骤 ：

1. 安装：

   npm i  amfe-flexible
   

2. main.js 引入如下内容：

   import 'amfe-flexible/index.min.js'
   

提示：

此时，审查元素会看到切换不同设备时,html的font-size会随着页面大小改变而变化，大小是页面实际宽度的 1/10。

注意：

​ 元素实际大小 = rem * 基准值

动态rootValue

开发中遇到问题:

1. Vant 的rootValue根植为37.5------>Vant UI的设计稿的参照尺寸是375

2. 设计稿rootValue根植为75------>原始设计稿的参照尺寸是750

   同样是375px，在vant中是横向满屏显示，在原始设计稿中应该是显示一半大小，但现在也满屏显示，这样不对。

解决方案(两种) ：

1. posttorem的rootValue仍然为37.5,设计稿尺寸除以2作为css的px尺寸

   即想要表现一半尺寸效果，就是375/2 = 187.5px

2. 将rootValue设置为动态的值->参考解决方案

   配置 postcss.config.js：

   const {
     sep
   } = require('path')
   
   module.exports = ({
     file
   }) => {
     const rootValue = file.dirname.indexOf(`node_modules${sep}vant`) !== -1
       ? 37.5
       : 75
   
     return {
       plugins: {
         autoprefixer: {},
         'postcss-pxtorem': {
           rootValue,
           propList: ['*']
         }
       }
     }
   }
   

注意 ：这里推荐使用第二种解决方案,根据不同情况设置不同的rootValue值。

1. 使用Vant组件不影响。
2. 自己的标签使用设计稿尺寸不用除以2，加快开发。
3. 开发中常用的设计稿的尺寸通常是750px。