vant移动端rem适配

vant官网:https://vant-contrib.gitee.io/vant/v2/#/zh-CN/advanced-usage#postcss-shi-li-pei-zhi

如果需要使用 rem 单位进行适配，推荐使用以下两个工具：

• postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
• lib-flexible 用于设置 rem 基准值

一、postcss-pxtorem

安装postcss-pxtorem

npm install postcss postcss-pxtorem --save-dev

然后在根目录下创建文件postcss.config.js

module.exports = {
    
    
    plugins: {
    
    
      'postcss-pxtorem': {
    
    
        rootValue: 37.5,
        propList: ['*'],
      },
    },
  };

//如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 rootValue 配置调整为:

// postcss.config.js
module.exports = {
    
    
  plugins: {
    
    
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
    
    
      rootValue({
    
     file }) {
    
    
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
    },
  },
};

2、lib-flexible

安装lib-flexible

npm i amfe-flexible

然后在main.js导入该模块

import 'amfe-flexible'

测试

就是这么简单，完结撒花