Vant UI 组件库如何做rem适配?
Vant是一款移动端基于vue的组件库,V2.1.1版本非常棒。文档地址:https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/intro,那么Vant如何使用(以下操作都是基于vue-cli3)
1.如何自动按需引入组件?
《1》安装插件:npm i babel-plugin-import -D
babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入
《2》在 babel.config.js 中配置
在 babel.config.js 中配置
module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] };
《3》在main.js中添加项目中需要用到的组件
例如:
此步骤不能少,不然使用中无效果
2.如何结合flexible做Rem适配?
看官方文档Vant 中的样式默认使用px
作为单位,那么既然需要用rem做适配,按下面步骤操作
《1》如何将px单位转化为rem?
借助postcss-pxtorem插件,postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem。如何操作?
安装:npm install autoprefixer postcss-pxtorem --save-dev
配置:vue.config.js文件
const autoprefixer = require('autoprefixer') const pxtorem = require('postcss-pxtorem') module.exports = { css: { loaderOptions: { postcss: { plugins: [ autoprefixer(), pxtorem({ rootValue: 37.5, propList: ['*'], // 该项仅在使用 Circle 组件时需要 // 原因参见 https://github.com/youzan/vant/issues/1948 selectorBlackList: ['van-circle__layer'] }) ] } } } }
按以上操作即可
《2》如何做rem适配?
rem适配文档上建议使用lib-flexible,flexible适配的原理是物理像素与逻辑像素的相互转化:物理像素px = window.screen.width(逻辑像素pt) * window.devicePixelRatio
如何配合框架使用:
1.安装
npm i -S amfe-flexible
2.main.js引入
import 'amfe-flexible'
《3》项目中使用?
对于宽度为750px的设计图,由于rootValue: 37.5为基准,在写css时候设计图上文字大小多少像素就写多少像素即可