自從去年接觸移動端頁面開發(fā),跟像素相關幾個名詞就像幽靈一樣揮著不去咙轩，看了很多文章腾么，始終不敢說真正理解了存和，每次碰移動端頁面開發(fā)都心虛缰犁，整理一下浑此，沒事看看骆捧。
概念
邏輯像素：又稱css像素候学，viewport中的一個小方格歧寺，css樣式代碼中使用的就是邏輯像素钞脂，一個抽象概念揣云，并不存在
設備獨立像素：與設備無關的邏輯像素，代表可以通過程序控制使用的虛擬像素冰啃，是一個總的概念 （ 看到這個名詞就默認是邏輯像素就行）
物理像素：又稱設備像素邓夕，顯示器（手機屏幕）上最小的物理顯示單元刘莹，常說的1080x1920像素分辨率就是用的設備像素單位
ppi(pixel per inch):表示每英寸所包含的像素點數(shù)目，數(shù)值越高焚刚，說明屏幕能以更高密度顯示圖像
dpr(device pixel ratio):設備像素比点弯，代表設備獨立像素到設備像素的轉(zhuǎn)換關系，在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ù)问潭，處變不驚猿诸，一步一個腳印才是真理，不斷學習狡忙，不斷進步梳虽。
