手淘框架是一個用來適配移動端的js框架，下面我們來講解一下如何使用手淘的這套框架。

基本概念

1、視窗viewport

可能寫過移動端的朋友就知道viewport是什么意思。

如果你不知道的話,可以簡單理解成：瀏覽器的可視區窗口。可能在PC端,viewport就是瀏覽器窗口的寬度高度。但在移動端設備上卻就有點復雜,具體的詳細介紹我就不介紹啦!可以自行百度...

2、物理像素

物理像素又被稱為設備像素,他是顯示設備中一個最微小的物理部件。每個像素可以根據操作系統設置自己的顏色和亮度。正是這些設備像素的微小距離欺騙了我們肉眼看到的圖像效果。

3、設備獨立像素

設備獨立像素也稱為密度無關像素,可以認為是計算機坐標系統中的一個點,這個點代表一個可以由程序使用的虛擬像素(比如說CSS像素),然后由相關系統轉換為物理像素。

4、CSS像素

CSS像素是一個抽像的單位,主要使用在瀏覽器上,用來精確度量Web頁面上的內容。一般情況之下,CSS像素稱為與設備無關的像素(device-independent pixel),簡稱DIPs。

5、屏幕密度

屏幕密度是指一個設備表面上存在的像素數量,它通常以每英寸有多少像素來計算(PPI)。

6、設備像素比

設備像素比簡稱為dpr,其定義了物理像素和設備獨立像素的對應關系。它的值可以按下面的公式計算得到:

設備像素比 = 物理像素 / 設備獨立像素

眾所周知,iPhone6的設備寬度和高度為375pt * 667pt,可以理解為設備的獨立像素;而其dpr為2,根據上面公式,我們可以很輕松得知其物理像素為750pt * 1334pt。

其實手淘框架的核心原理就是根據不同的width給網頁中html跟節點設置不同的font-size，然后所有的距離大小都用rem來代替，這樣就實現了不同大小的屏幕都適應相同的樣式了，首先我們來說一下常用的移動設備。

iphone6:    375px*667px  實際像素：750px*1334px

iphone5:   320px*568px   實際像素：640px*1136px

iphone4:   320px*480px   實際像素：640px*960px

nexus5X(安卓)： 411px *731px 實際像素：411px＊731px

以上數據都來自于chrome瀏覽器－ －！！！

其實我們的iphone手機都是視網膜屏幕，所以我們的實際像素因該是無力像素＊視網膜屏的倍數。

然而我們在實際的開發中ui給出的圖一般都是750X1334的，其實iphone6的像素和ui設計的像素是一樣大小的，但是我們的開發如果都是按照6的px來設計，那么我們的其它比6小尺寸屏幕的所有設備都會面臨width不夠的問題。flexible就完美的解決了這個問題。

應用中我們只要設置好他的公共比的像素就ok了，比如說如果ui圖的像素是750，那我們需要的就是750/10，我們需要的就是75，我們所有的width的固定px就都可以變換成用rem像素代替實現樣式統一例如我們width需要200px那么我們就可以這樣寫：