首先我们需要知道，flexible的实质是根据不同尺寸动态改变缩放比，动态改变html的style.fontSize，也就是rem布局，感兴趣的可了解如何实现1px物理像素。
(flexible由手淘团队开发，简直解决了rem适配的噩梦，如下是手淘rem需要适配的机型)
进入正题：
1、第一
引入lib-flexible .
安装lib-flexible： npm i lib-flexible --save
在项目的入口main.js文件中引入lib-flexible: import 'lib-flexible'
2、第二
使用postcss-px2rem自动将css中的px转换成rem（真的是大大提升了我们的工作效率，棒棒的，不用自己去瞎算啊）
安装postcss-px2rem ： npm install postcss-px2rem --save-dev
3、配置postcss
4、重启项目发现，px已经在浏览器转换为rem，但是问题没有完全结束：
把px转换成rem的配置完成后，还需要在入口文件（main.js）里面配置一段代码，此代码的目的是监听window窗口大小的变化
从而动态改变html根节点的font-size的大小。
达到适配不同设备的效果；
5、最后，我们需要知道flexible的转换不包括第三方ui库，具体去官网看下：网上有许多解决办法，首先我们要知道，根源是因为移动端ui库，本来就是适配了移动端尺寸，而fliexble再去适配一次，能不变小吗？
那么就知道解决办法了，总结大致如下：
1、固定缩放比，即dpr为1，不推荐，全局设置不易调控；
2、给不希望转化rem的组件，设置px的时候，单位后面加上 ／* *／即忽略该px
3、在它转化之前就设置rem，个人推荐该法，利用VScode的px to rem，将写好的px，直接选中option+z转为rem，然后fliexble就在webpack编译的时候不去转化它了。
至此，结束。