移動端高清適配、佈局開發解決方案

前言：移動端的適配是個大問題，特別是安卓，國內版本衆多，不規則的dpr數不勝數，爲了適配各類移動終端，網易、百度、阿里各大廠都有本身的適配解決方案。要解決哪些問題呢？

• 不一樣設備下的統一視覺體驗。
• 不須要手動設置viewport，根據當前環境計算出最適合的viewport。
• 支持任意尺寸的設計圖，不侷限於特定尺寸的設計圖。
• 支持單一項目，多種設計圖尺寸，專爲解決大型，長週期項目。
• 支持px2rem轉換方法，CSS佈局，原始值不丟失。
• 有效解決移動端1像素問題。

 

一、首推阿里的flexible適配方案，酷、靚、好用。阿里無線前端團隊開發的，手淘的H5頁面在使用。

　　github傳送門：https://github.com/amfe/lib-flexible/ 

　　flexible詳解：https://github.com/amfe/article/issues/17

　　flexible一個案例：http://huodong.m.taobao.com/act/yibo.html

 

二、墨塵大大寫的hotcss，比flexible稍輕量，開發利器。

　　github傳送門：https://github.com/imochen/hotcss 

　　hotcss一個案例：http://imochen.github.io/hotcss/example/normal/

 

三、插件px2rem保留源文件px，將px轉化成rem

　　npmjs傳送門：https://www.npmjs.com/package/px2rem

　　配合gulp使用：gulp-px3rem  https://www.npmjs.com/package/gulp-px3rem

　　配合webpack使用：px2rem-loader  https://www.npmjs.com/package/px2rem-loader