自從去年接觸移動端頁面開發(fā),跟像素相關幾個名詞就像幽靈一樣揮著不去，看了很多文章，始終不敢說真正理解了，每次碰移動端頁面開發(fā)都心虛，整理一下，沒事看看。
概念
邏輯像素：又稱css像素，viewport中的一個小方格，css樣式代碼中使用的就是邏輯像素，一個抽象概念，并不存在
設備獨立像素：與設備無關的邏輯像素，代表可以通過程序控制使用的虛擬像素，是一個總的概念 （ 看到這個名詞就默認是邏輯像素就行）
物理像素：又稱設備像素，顯示器（手機屏幕）上最小的物理顯示單元，常說的1080x1920像素分辨率就是用的設備像素單位
ppi(pixel per inch):表示每英寸所包含的像素點數(shù)目，數(shù)值越高，說明屏幕能以更高密度顯示圖像
dpr(device pixel ratio):設備像素比，代表設備獨立像素到設備像素的轉換關系，在JS中可以通過window.devicePixelRatio獲取 。
dpr = 設備像素/設備獨立像素
關系
PC端 - - 1個邏輯像素 = 1個物理像素（在100%，未縮放的情況下，如果縮放到200%，可以說一個邏輯像素 = 2個物理像素）
移動端 - - 移動端根據(jù)設備不同有很大差異，根據(jù)ppi或dpr可以得到不同的換算關系
用途
這些都是基礎概念，是必須要理清的，明白了這些，要面對一個問題- 移動端適配。要真正做好移動端適配其實是件很麻煩的事情，因為android有著五花八門的機型，iphone又有大小屏。之前做過一個移動端項目是采用手淘H5頁面的終端適配解決方案，基本思路是：
1、采用iphone6(dpr=2)作為設計和開發(fā)基準
2、定義一套適配規(guī)則，自動適配剩下的N種設備尺寸
--這套規(guī)則就是一套js代碼，執(zhí)行這個JS后，會在<html>元素上增加一個data-dpr屬性，以及一個font-size樣式。JS會根據(jù)不同的設備添加不同的data-dpr值，比如說2或者3，同時會給html加上對應的font-size的值，比如說75px。如此一來，頁面中的元素，都可以通過rem單位來設置。他們會根據(jù)html元素的font-size值做相應的計算，從而實現(xiàn)屏幕的適配效果。
-- 實際開發(fā)中，字體尺寸是根據(jù)上述data-dpr屬性值來確定的，我們用sass寫了一個全局mixin供其他頁面使用
@mixin font-dpr($font-size){
font-size: $font-size;
[data-dpr="2"] & { font-size: $font-size * 2; }
[data-dpr="3"] & { font-size: $font-size * 3; }
}
rem的尺寸計算：手淘將視覺稿寬度分為100份（主要是為了兼容vh和vw,尺寸單位，有興趣的可以了解一下）,每10份 = 1rem，代碼實現(xiàn)：用sass寫一個函數(shù)，全局使用
/**
* $px 邏輯像素值
* $base-font-size rem基準值(計算方式類似于vw) html的font-size值： deviceWidth/100 *10
*/
@function px2em($px, $base-font-size: 124.2px) {
@return ($px / $base-font-size) * 1rem;
}
--這套規(guī)則只對iOS設備進行dpr的判斷，對于Android系列，始終認為其dpr為1。所以無法完全適配繁雜的Android系列
3、特殊適配效果給出設計效果（這個沒做過，技術上應該是采用媒體查詢根據(jù)特例寫特定樣式）
移動端適配的東西很多，感興趣的可以看一下參考文章，里面詳細介紹了手淘的適配方案。
前進的路上有太多的變數(shù)，處變不驚，一步一個腳印才是真理，不斷學習，不斷進步。
