參考：https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

首先先弄清楚幾個基本的原理知識：

物理像素：又稱設備像素，是顯示設備中一個最微小的物理部件；

設備獨立像素：可認為是計算機坐標系統中的一個點，這個點代表一個可以由程序使用的虛擬像素(比如說CSS像素)，然後由相關系統轉換為物理像素

設備像素比 = 物理像素 / 設備獨立像素，可通過js的window.devicePixelRatio獲取，或css的-webkit-device-pixel-ratio

********ps： iPhone6，設備寬高為375pt*667pt,相當於設備獨立像素，dpr=2,那麽物理像素就為750pt*1334pt********

1、安裝fleible

npm install lib-flexible –save

2、在main.js引入

Import ‘lib-flexible’

3、安裝px2rem，使得我們在開發中不需要自己手動計算，照常寫px

npm install px2rem-loader --save-dev

4、在build目錄下的utils.js修改配置

重新開啟項目，750設計稿，按設計稿來寫px；

註意要點：1、在index.html的頭部，不要設置meta name=‘viewport‘；

2、考慮到字體文件自帶的點陣尺寸，不希望出現15、13px這種奇數字號，字號依然使用px；如：font-size:28px;/*px*/

3、對於1px像素border，為了避免在部分安卓手機丟失，在其後面添加/*no*/,使其不轉化為rem單位，如:border:1px solid #000;/*no*/

個人看法：對於flexible適配方案，查閱源碼，可得知它對於安卓手機的處理，是統一dpr設置為1來處理，但近年來，國內各個品牌安卓手機的使用人群比例逐漸增加，將其統一處理為1，在大屏幕手機的體驗，有失偏頗。

*****如有不同觀點或者錯誤，歡迎指出，好人一生平安~~~

vue rem移動端適配