flexible.js-移動端H5頁面適配應用

前端頁面適配有兩大方向：一是佈局適配，可使PC、手機、平板共用一份代碼，實現方法有css 媒體查詢、css 彈性盒子佈局、 css grid佈局等。二是高清適配，面對的是移動開發中設備不一樣分辨率和不一樣尺寸，最大限度還原設計稿效果。

flexible.js是高清適配的一種方法，它經過javascript根據不一樣設備的dpr值和設備寬度爲html動態設置font-size，其餘元素使用rem作單位。

原理：

與flexible密切相關的是dpr概念，有如下公式：

dpr(設備像素比) = 物理像素(屏幕像素) / 設備獨立像素（css像素）

普通屏幕dpr爲1，高清屏幕的dpr爲2或者更高。咱們樣式代碼上定義的元素大小是css像素，所以意味着普通屏和高清屏上展示的像素會有不一樣。例如

width:2px; height:2px在普通屏上物理像素是 2X2=4,在高清屏上則是(2X2)X(2X2)=16

這一現象帶來了圖片高清問題：因爲圖片像素是物理像素，若是以普通屏爲標準制圖（一倍圖）在高清屏上展現會致使放大模糊（1個像素放大爲4個），若是以高清屏爲標準制圖（二倍圖）在普通屏上顯示會致使縮小（4個像素縮小到1個）。所以完美的辦法是UI提供1倍圖和2倍圖，前端經過代碼適配：

1. css media
@media screen and (-webkit-min-device-pixel-ratio: 2) {}
2. img srcset
<img width="100" height="100" src="image100.png" srcset="image200.png 2x,image300.png 3x"/>
複製代碼

一樣也會帶來字體和元素大小的問題，但顯然不能再使用媒體查詢的方式來適配，適配代碼太多了，這時能夠引入 flexible 的方式。

flexible的原理就是rem ,rem是CSS3新增的相對長度單位，是指相對於根元素html的font-size標準值的大小。

一般爲了兼容第三方插件的樣式，咱們想以原始比例顯示頁面，而且不容許用戶修改，因此都會設置頁面縮放scale=1，flexible再設置dpr = parseInt(1/scale)=1以下：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

根元素html的font-size標準值 = document.documentElement.clientWidth * dpr / n 這裏的n可自由設定，flexible將n定爲10，從而使元素大小適配不一樣手機屏幕尺寸和dpr

• iPhone3gs: 320px / 10 = 32x
• iPhone6: 375px / 10 = 37.5px

元素經過rem單位來設置，從而實現了屏幕適配。例如設置div width:10rem;在iPhone3gs上表示320px,在iPhone6上表示375px,都實現了鋪滿屏幕寬度。

最後flexible會監聽resize事件從新計算html的font-size flexible倉庫

• 單位換算

咱們從設計稿獲得的尺寸是px爲單位的，若是要換算成rem做單位須要依賴編譯器插件，並且會出現小數的狀況。因此能夠自定義flexible.js文件，將計算font-size標準值的n定爲3.75，這樣可使得在高清屏中1rem = 100px, 這樣只需心算一下就能換算單位了。

• 自動編譯

px2rem-loader : webpack加載器，將px換算rem

gulp-px3rem : gulp插件，將px換算rem

參考資料

解惑好文：移動端H5頁面高清多屏適配方案

flexible.js如何實現rem自適應