首先我們需要知道，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編譯的時候不去轉化它了。
至此，結束。