源碼解讀 之 Flexible

源碼解讀 之 Flexible

初版

https://github.com/amfe/lib-f...

• 獲取 meta 標籤 scale 值 初始化 dpr
• 判斷是否 ios，非ios dpr=1
• ios 獲取devicePixelRatio（幾倍屏），1，2，3
• 監聽屏幕變化設置html，body FontSize（控制1rem，比例）

第二版

https://github.com/amfe/lib-f...

• 獲取devicePixelRatio（幾倍屏），1，2，3 初始化dpr
• 監聽屏幕變化設置html，body
• FontSize（控制1rem，比例）
• 檢測是否支持0.5px的特性，經過添加類名hairlines來向下兼容

好處

• 對android不支持高清方案，得以解決
• 代碼量減小
• 保護了css媒介media，初版會破壞css媒介media

補充知識rem與px的轉換

上訴講到 監聽屏幕變化設置html，body FontSize（控制1rem，比例） 這裏，flexible，會設置html的fontSize爲clientWidth / 10。
也就是 1rem= clientWidth / 10
舉個例子：

375的屏幕，750px的設計圖
1rem = 375 / 10 = 37.5px

再經過postcss-pxtorem轉換
寫代碼就是 
750px滿屏寬度
750px ---> postcss-pxtorem ---> 10rem --->（clientWidth / 10） * 10 PX