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

標籤：

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

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

 

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

 

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

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

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

 

3、外掛程式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

 

 　　

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