本文的內容就是介紹淘寶彈性佈局方案lib-flexible實踐，分享給大家供大家參考，具體內容如下

1. 引入flexible.js

這一步其實非常簡單，只要把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了：

1. 編寫CSS
   基本要求：

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

2）標註稿基準字型大小 = 標註稿寬度 / 10，如標註稿寬為750，標註稿基準字型大小為75；標註稿寬為640，標註稿基準字型大小為64；（所以淘寶這個方案是可以在任意設計稿尺寸下使用的）

3）如果需要設定font-size，可跟據html的data-dpr屬性來處理，類似下面的寫法：

[data-dpr="2"] p {
  font-size: 16px;
}

[data-dpr="3"] p {
  font-size: 24px;
}

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

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

由於用了less，事先定義了一個變數來儲存標註稿基準字型大小：

@font-size-base: 75;
所以px2rem的轉換變得非常容易，如上所示。less編譯之後，會將正確的rem值計算出來：

.btn {
 width: 5.52rem;
 height: 1.06666667rem;
}

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

.btn-android {
 background-image: url("../img/@2x/[email protected]@version");
 [data-dpr="3"] & {
  background-image: url("../img/@3x/[email protected]@version");
 }
}

這下就OK了，原先還不知道data-dpr有什麼作用，現在看看，作用還是挺大的。

以上就是實現淘寶彈性佈局方案lib-flexible實踐的全部過程，希望對大家的學習有所啟發。