环境vue-cli3 , "vant": "^2.12.2","vue": "^2.6.11"
Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：
postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值
1.下载npm依赖
npm install postcss-pxtorem --save-dev
npm i -S amfe-flexible
2.在根目录修改postcss.config.js文件配置（如果没有自己需要在根目录下新建postcss.config.js）
转换vant，设置rootValue:37.5
module.exports = { plugins: { autoprefixer: { overrideBrowserslist: ['Android >= 4.0', 'iOS >= 8'], }, // px转换成rem 'postcss-pxtorem': { // vant-UI的官方根字体大小是37.5 rootValue: 37.5, propList: ['*'], }, }, };
不转换vant
module.exports = { plugins: { autoprefixer: { overrideBrowserslist: ['Android >= 4.0', 'iOS >= 8'], }, // px转换成rem 'postcss-pxtorem': { // 设计图页面尺寸如果是750就填75,是640就填入64 rootValue: 75, propList: ['*'], // vant不转化 vant-UI的官方根字体大小是37.5 selectorBlackList:['van'] }, }, };
3.在main.js引入需要计算rem的libflexible文件
import "amfe-flexible";
4.重启服务
5.布局按照设计图px布局 然后就会自动计算rem的值
.test-box { width: 375px; // 会自动转化为10rem 铺满整个屏幕 height: 500px; font-size: 32px; background: red; }
本文暂时没有评论，来添加一个吧(●'◡'●)