移动端适配rem(Vant)

需要注意

该插件不能转换行内样式中的px
利用vant提供的
移动端适配rem(Vant)_第1张图片
首先安装
移动端适配rem(Vant)_第2张图片
移动端适配rem(Vant)_第3张图片
可以看到
移动端适配rem(Vant)_第4张图片
第二步配置
1.安装
npm install postcss-pxtorem -D
2.在项目根目录创建.postcssrc.js文件
移动端适配rem(Vant)_第5张图片
配置完毕,重新启动服务(红色是警告,是因为vue-cli已经配置过了,所以不需要)
所以注释这些,再重启就不会有警告了
移动端适配rem(Vant)_第6张图片直接使用即可

移动端适配rem(Vant)_第7张图片

移动端适配rem(Vant)_第8张图片

此时已经是rem
vant组件的样式
移动端适配rem(Vant)_第9张图片
自己写的样式
移动端适配rem(Vant)_第10张图片
其他设计稿尺寸
移动端适配rem(Vant)_第11张图片

你可能感兴趣的:(javascript,开发语言,rem)