目的:Vant UI 和设计稿一起使用进行适配移动端
1.如何进行 REM 适配
// 下载插件
npm i amfe-flexible
// 在main.js中引入
import 'amfe-flexible'
2. REM 适配原理
利用媒体查询或 JS 动态检测设配的宽度,不同宽度下设置对应的根元素字体大小,这样所有使用 REM 作单位的元素就跟着变化.
2.1 如何把写的 px 转换成 rem
npm install postcss-pxtorem@5 -D # -D 是安装到开发依赖,项目上线的时候就没用了 # yarn add postcss-pxtorem@5 -D
2.2在根目录新建 .postcssrc.js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}