vue rem移動端適配

 

參考：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********

一、安裝fleible

npm install lib-flexible –save

二、在main.js引入

Import ‘lib-flexible’

三、安裝px2rem，使得咱們在開發中不須要本身手動計算，照常寫px

npm install px2rem-loader --save-dev

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

從新開啓項目，750設計稿，按設計稿來寫px；

注意要點：一、在index.html的頭部，不要設置meta name='viewport'；

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

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

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

*****若有不一樣觀點或者錯誤，歡迎指出，好人一輩子平安~~~