最近公司剛接了公司的一個專案，其中終端適配方案是用的淘寶團隊開源的Flexible方案，第一次使用，收穫良多，做一下總結。

一、Flexible適配思路

  flexible是淘寶團隊開源的一種終端適配方案。核心思路是檢測裝置的DPR和螢幕寬度，動態修改根標籤html的font-size樣式的大小，用rem單位來做適配。最後這句話怎麼理解呢？flexible的做法是將設計稿分為10份，每一份就是設計稿寬度的百分之十。我們知道，UI一般會選擇一款裝置作為設計基準。現在標準用的比較多的是ipone6。ipone6的螢幕寬度是375，dpr是2，為了適配retina屏，所以設計稿的寬度一般為750px。那麼將750px分為10份，也就是10rem，750/10也就是75px;1rem=75px。那麼我們在編碼的時候，比如一圖片在設計稿上的尺寸為100px，那麼它的長度就應該為100/75rem。詳細的思路分析，我會再寫一篇flexible的原始碼分析。

二、裝置畫素比(device pixel ratio )

  為了更好的理解，首先先介紹一下幾個重要的概念，先知道裝置畫素比是怎麼計算的（dpr）。

物理畫素(physical pixel)

  顯示器(手機螢幕)上最小的物理顯示單元

裝置獨立畫素(density-independent pixel)

  裝置獨立畫素(也叫密度無關畫素)，可以認為是計算機座標系統中得一個點，這個點代表一個可以由程式使用的虛擬畫素(比如: css畫素)，然後由相關係統轉換為物理畫素。 所以說，物理畫素和裝置獨立畫素之間存在著一定的對應關係，這就是接下來要說的裝置畫素比。

裝置畫素比(device pixel ratio )

裝置畫素比 = 物理畫素 / 裝置獨立畫素 // 在某一方向上，x方向或者y方向 。為什麼要分為兩個方向呢，看下了下面的圖就知道了。

畫素看做是一個平面，面的大小由寬高算出，如果只考慮一個方向，那麼它只會是一條線。言歸正傳，如上圖 寬高都為1px作為物理尺寸的長度都是一樣的，但是裡面對應的物理畫素不同。一個寬高為1px的CSS畫素的普通屏裡面包含1個物理畫素，而dpr為2的retina屏則有四個。為什麼是4個呢？上面說到dpr是在某一方向上，x方向或者y方向，物理畫素/裝置獨立畫素（css畫素）的比。寬和高都是X2的所以才是4倍，設計稿才會是375x667和750×1334。

為什麼要說這一部分呢，在使用手淘flexible的方案的時候，我們選擇圖片是需要使用一倍圖、二倍圖或者三倍圖，最好是根據裝置來切換，不然可能會出現圖片模糊狀態很明顯的情況。為什麼會出現圖片模糊的情況呢？這裡涉及到另外一個概念

點陣圖畫素

一個位影象素是柵格影象(如：png, jpg, gif等)最小的資料單元。每一個位影象素都包含著一些影象物理資訊(如：顯示位置，顏色值，透明度等)。

理論上，1個位影象素對應於1個物理畫素，圖片才能得到完美清晰的展示。在普通螢幕下是沒有問題的，但是在retina螢幕下就會出現點陣圖畫素點不夠，從而導致圖片模糊的情況。一張圖來表示：

由於單個位影象素不可以再進一步分割，所以只能就近取色，從而導致圖片模糊(注意上述的幾個顏色值)。 
所以，對於圖片高清問題，比較好的方案就是兩倍圖片(@2x)。如：200×300(css pixel)img標籤，就需要提供400×600的圖片。如此一來，點陣圖畫素點個數就是原來的4倍，在retina螢幕下，點陣圖畫素點個數就可以跟物理畫素點個數形成 1 : 1的比例，圖片自然就清晰了(這也解釋了為啥視覺稿的畫布大小要×2)。

這裡就還有另一個問題，如果普通螢幕下，也用了兩倍圖片，會怎樣呢？ 
很明顯，在普通螢幕下，200×300(css pixel)img標籤，所對應的物理畫素個數就是200×300個，而兩倍圖片的點陣圖畫素個數則是200×300*4，所以就出現一個物理畫素點對應4個位影象素點，所以它的取色也只能通過一定的演算法(顯示結果就是一張只有原影象素總數四分之一，我們稱這個過程叫做downsampling)，肉眼看上去雖然圖片不會模糊，但是會覺得圖片缺少一些銳利度，或者是有點色差(但還是可以接受的)。當然有些做法是根據dpr向伺服器請求不同解析度的圖片，不然把大量圖片全放在應用中的話，你的應用會變得很大。

為什麼要用那麼多得筆墨介紹裝置畫素比呢，因為手淘的flexible方案是為了不同的終端做的適配，但是這僅僅是頁面比列的適配。在不同dpr的裝置上佈置應用，還需要解決dpr不同所帶來的其他問題。