Vant 中的样式默认使用px作为单位,如果需要使用rem单位,推荐使用以下两个工具:
postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem;
amfe-flexible 用于设置 rem 基准值
1==> 去下载amfe-flexible 和postcss-pxtorem
"dependencies": {
"amfe-flexible": "^2.2.1",
"core-js": "^3.6.5",
"postcss-pxtorem": "^5.1.1",
"vant": "^2.12.9",
"vue": "^2.6.11",
"vue-router": "^3.2.0"
},
安装postcss-pxtorem和amfe-flexible的时候,要注意版本,
否者可能会出现如下Error: PostCSS plugin tailwindcss requires PostCSS 8
这个因为版本出问题了,下载之后,重新下载
npm install postcss-pxtorem -D
npm install amfe-flexible -S
-D 是 --save-dev 的简写
–save-dev || -D //开发依赖(辅助)
--save || -S // 运行依赖(发布)
2==>通过meta标签,设置设备宽度以及缩放比例
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
3==> 创建文件 .postcssrc.js文件,在根目录中
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5, //vant-UI的官方根字体大小是37.5
propList: ['*']
}
}
}
温馨提示: rootValue这个配置项的数值是多少呢???
通常我们是根据设计图来定这个值,原因很简单,便于开发。
假如设计图给的宽度是750,我们通常就会把rootValue设置为75,
这样我们写样式时,可以直接按照设计图标注的宽高来1:1还原开发。
(iPhone界面尺寸:320 * 480、640 * 960、640 * 1136、750 * 1334、1080 * 1920等。)
那为什么你在这里写成了37.5呢???之所以设为37.5,
是为了引用像vant、mint-ui这样的第三方UI框架,
因为第三方框架没有兼容rem,用的是px单位,
将rootValue的值设置为设计图宽度(这里为750px)75的一半,
即可以1:1还原vant、mint-ui的组件,否则会样式会有变化,例如按钮会变小。
既然设置成了37.5 那么我们必须在写样式时,也将值改为设计图的一半。
如果你用的是摹客,可以切换开发平台,变成自定义,单位转换1px=2px;
参考:https://www.jianshu.com/p/220a186cc033
4==>在main.js中去引入
import 'amfe-flexible/index.js'
我们可以看见在h5端上
我们可以看见在pc端上