vue rem移動端適配

標籤：html   img   適配方案   目錄   字型大小   png   layout   大螢幕   奇數   

 

參考：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移動端適配