淘寶彈性佈局方案lib-flexible實踐

2個月前，寫過一篇文章《從網易與淘寶的font-size思考前端設計稿與工做流》總結過一些移動web中有關手機適配的一些思路，當時也是由於工做的關係分析了下網易跟淘寶的移動頁面，最後纔有那篇文章的總結，惋惜的是由於項目的關係，這兩個月來幾乎沒有機會作移動類項目的工做，因此那些理論一直沒有獲得真正的實踐。此次由於公司有一個app須要作一個推廣的下載頁面，雖然簡單，但也值得一試那篇文章裏提到的適配方法，因此本文的內容就是介紹該文中提到的淘寶的作法：《lib-flexible彈性佈局方案》。（注：該文中提到的網易的作法跟淘寶的作法實際上是大同小異，你訪問http://3g.163.com/touch/看下頁面源碼頂部的JS就能明白了。相較於淘寶的作法，淘寶的方法更能稱之爲一個方案，網易的作法代碼質量實在不敢恭維，因此從本文的角度，推薦淘寶的lib-flexible）

1. 頁面需求

這是要作的頁面效果（不要對設計置評，這不是開發人員決定的）：

這是尺寸標註圖（750*1334）：

 

而後美工在750*1334的設計稿之上，按個人要求提供如下素材的切圖：

包括兩個下載按鈕的背景圖片，logo，底部梯形的漸變背景和body部分的mobile 背景圖。注意這些圖片都是在750*1334的設計稿裏面切出來的，因此尺寸都是設計稿裏的原始尺寸，好比android.png：

考慮到retina顯示屏的問題，結合下圖的適配思路：

我認爲解決retina屏問題的可行方案是：

1）在devicePixelRatio<=2時，圖片統一使用750設計稿的切圖

2）在devicePixelRatio>=2時，圖片統一使用750*1.5=1125，也就是所謂@3x設計稿的切圖。

我把美工給個人在750*1334的設計稿下的切圖都放在img/@2x 這個文件夾下：

而後讓她幫忙把750的設計稿矢量放大1.5倍，再按照一樣的切圖要求爲我提供@3x的切圖，並放在了img/@3x 這個文件夾下：

@3x下的圖片理論上尺寸應該等於@2x下的圖片*1.5，不過個人切的沒有這麼完美。

有了前面的需求介紹和素材準備，下一步就是該引入核心的js文件，編寫css樣式了。

2. 引入flexible.js

這一步其實很是簡單，只要把https://github.com/amfe/lib-flexible源碼裏flexible.js的內容複製出來，在本地新建一個flexible.js的文件，打開粘貼進去就能夠了，我把這個文件放在了js/lib下面：

接着在html頁面裏面，儘量早的引入這個js文件（爲了讓適配的效果更快）：

注：使用lib-flexible，一般不要寫：

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

交給flexible.js自動處理。

而後在chrome的模擬器裏面，選擇iphone6，應該就能看到html的font-size已經被設置爲font-size: 75px了：

 

3. 編寫CSS

基本要求：

1）除font-size外，其它大小都根據750標註稿的尺寸，轉換成rem單位的值，轉換方法爲：標註稿尺寸 / 標註稿基準字體大小；

2）標註稿基準字體大小 = 標註稿寬度 / 10，如標註稿寬爲750，標註稿基準字體大小爲75；標註稿寬爲640，標註稿基準字體大小爲64；（因此淘寶這個方案是能夠在任意設計稿尺寸下使用的）

3）若是須要設置font-size，可跟據html的data-dpr屬性來處理，相似下面的寫法：

1 [data-dpr="2"] p {
2     font-size: 16px;
3 }
4 
5 [data-dpr="3"] p {
6     font-size: 24px;
7 }

以安卓下載按鈕的樣式爲例，說明這種用法。android.png的尺寸爲：414*80，因此css這麼寫：

1 .btn {
2     width: 414rem/@font-size-base;
3     height: 80rem/@font-size-base;
4 }

因爲用了less，事先定義了一個變量來保存標註稿基準字體大小：

@font-size-base: 75;

因此px2rem的轉換變得很是容易，如上所示。less編譯以後，會將正確的rem值計算出來：

1 .btn {
2   width: 5.52rem;
3   height: 1.06666667rem;
4 }

到此，lib-flexible的基本實踐就結束了，不過還有一個問題，就是retina屏的問題，到如今都還沒提到@3x下圖的那些切圖怎麼辦，其實很簡單，藉助html元素的data-dpr屬性，能夠輕鬆實現另外一種媒介查詢，以便在devicePixelRatio>=2的時候啓用@3x下的圖片，仍是以安卓下載按鈕的樣式爲例，寫法是：

1 .btn-android {
2   background-image: url("../img/@2x/android.png?v=@@version");
3   [data-dpr="3"] & {
4     background-image: url("../img/@3x/android.png?v=@@version");
5   }
6 }

 

這下就OK了，原先還不知道data-dpr有什麼做用，如今看看，做用仍是挺大的。

4. 結束語

本篇內容相對簡單，一方面補充《從網易與淘寶的font-size思考前端設計稿與工做流》，另外一方面也記錄下這個頁面中積累的一些經驗，雖然只是一個小頁面，可是也見識到了lib-flexible的威力，畢竟一個頁面若是成功應用了這個方案，更多頁面也就不是問題了。

注：

1） 因爲使用了grunt構建，因此須要先安裝node ,git，再經過npm安裝grunt 和bower

2）考慮到未來可能要作全屏滾動的效果，因此這頁面一開始就是用fullpage.js來作的，經過bower引入了jquery跟fullpage.js的庫

3） 模塊化用到了requirejs

4）運行grunt default完成構建，再運行grunt server啓動靜態服務器預覽。

轉自：http://www.cnblogs.com/lyzg/p/5058356.html