✌vant-ui mint-ui ui框架显示缩小

H5项目使用UI框架样式显示缩小

先来张图，展示一下缩小的效果：

例如使用vant-ui框架

注意：ui的设计图尺寸为750，而vant-ui框架的尺寸是375，所以，当进行rem适配的时候，会把ui框架的尺寸转为750，导致框架显示就会缩小一倍，那么如何适配呢？

1、安装ui框架:

# Vue 2 项目，安装 Vant 2：
npm i vant -S

# Vue 3 项目，安装 Vant 3：
npm i vant@next -S

2、全局引入（main.js）:

import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

3、移动端rem适配:

// 安装postcss-pxtorem
npm install postcss-pxtorem --save-dev

// 安装 lib-flexible
// #1 安装 lib-flexible :  
npm install lib-flexible --save-dev

// #2 引入 lib-flexible （在项目入口文件 main.js 里 引入 lib-flexible）:
import 'lib-flexible'

4、postcss.config.js配置:

module.exports = {
  'plugins': {
    // to edit target browsers: use "browserslist" field in package.json
    'autoprefixer': {},
    // 配置ui框架的尺寸
    'postcss-pxtorem': {
        rootValue: 75,  // 这里是数字是按照设计图的尺寸来的，例如设计图尺寸是750的，那这里的值就是750/10
        propList: ['*'],
        selectorBlackList: ['van'] // 因为vant-ui 用的rem的尺寸是375的，所以这里要把他过滤掉。
      },
  }
}