移动端 REM 适配
Vant 中的样式默认使用 px
作为单位,如果需要使用 rem
单位,推荐使用以下两个工具:
- postcss-pxtorem 是一款 postcss 插件,用于将 px 单位转化为 rem
- lib-flexible 用于设置 rem 基准值
下面我们分别将这两个工具配置到项目中完成 REM 适配。
(1)使用 lib-flexible 动态设置 REM 基准值(html 标签的字体大小)
安装依赖:
npm i amfe-flexible
然后在 main.js
中加载执行该模块:
import 'amfe-flexible'
最后测试:在浏览器中切换不同的手机设备尺寸,观察 html 标签 font-size
的变化。
(2)使用 postcss-pxtorem 将 px
转为 rem
安装依赖:
npm install postcss-pxtorem -D
然后在项目根目录中创建 postcss.config.js
文件:
下面提供了一份基本的 PostCSS 示例配置,可以在此配置的基础上根据项目需求进行修改。
由于vant是基于375设计稿所以vant文件的css 的rootValue是37.5
我项目的设计稿是750,所以rootValue我设置为75
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue({file}){
return file.indexOf('vant')===-1?37.5 : 75
},
propList: ['*'],
},
},
};
配置完毕,重新启动服务。
最后测试:刷新页面,审查元素样式查看是否已将 px
转换为 rem
。