前言
按照vant官网给的rem适配，第一步安装postcss-pxtorem：npm install postcss-pxtorem；
第二步安装lib-flexible：npm i -S amfe-flexible，记得在main.js文件引入 import 'amfe-flexible'；
第三步进行 postcss配置
module.exports = {plugins: {autoprefixer: {browsers: ['Android >= 4.0', 'iOS >= 8'],},'postcss-pxtorem': {rootValue: 37.5,propList: ['*'],},},};
按照上面配置的话，引入的vant组件样式是正常的，但是其他就显示不正常。因为vant设计稿是375px,而我们的设计稿是750px，如果把上面配置中的rootValue改为75，那么vant组件就会缩小一半，如下图所示：
显然，我们要去解决这个问题。
解决方法
将postcss配置 改写
const path = require('path');module.exports = ({file}) =>{const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 37.5 : 75.0;return {plugins: {autoprefixer: {browsers: ['Android >= 4.0', 'iOS >= 8'],},'postcss-pxtorem': {rootValue: designWidth,propList: ['*'],},},}};
如果觉得《vant适配移动端750设计稿》对你有帮助，请点赞、收藏，并留下你的观点哦！
