H5可以配合vant组件库书写项目，和使用rem后vant组件样式变小了解决办法。（引入方式）

以下是配置rem步骤：

1.安装 flexible和 postcss-px2rem（命令行安装）
lib-flexible 会自动在为你添加 meta name=“viewport” 的标签
同时会自动设置html的 font-size 为屏幕宽度除以10，也就是 1rem 等于html根节点的 font-size。
假如设计稿的宽度是375px，此时1rem应该等于37.5px。
假如设计稿的宽度是750px，此时1rem应该等于75px
。
postcss-px2rem会将你代码中的px转换为rem

  npm install lib-flexible --savenpm install postcss-px2rem --save

2.在项目入口文件main.js 中引入lib-flexible
由于 flexible 会动态给页面 header 中添加 meta name=“viewport”，所以务必请把目录 public/index.html 中的这个标签删除--------但是可能也没有影响，先不删除试试，如果不行在删除试试。

  import 'lib-flexible'

3.配置 postcss-px2rem
修改 vue.config.js（vue-cli3 构建的项目比以前的精简许多，如果 没有请在根目录新建此文件即可）

vue.config.js：配置75

module.exports = {css: {loaderOptions: {css: {},postcss: {plugins: [require('postcss-px2rem')({remUnit: 75})]}}}
}

4.安装 cssrem 插件：会自动将你在css里输入的px转成对应比例的rem

5.重启项目

6.输入px测试：按照750px的设计稿，假设设计稿上的一个div宽度是375px，你只需要输入375px就会转换成5rem，自动占据一半宽度。

7.注意以后就是用自动转换的rem 不要使用px px是固定的在每个手机屏幕上都是一样大小 rem才会自适应大小