移動大潮已然到來，跟上節奏是必須。在進行更進一步深入學習和研究各種相關問題之前，有些概念是必須研究透徹的，這將會是以后開發和適配的基石。
文章導讀：
- 一.單位英寸像素數（Pixel Per Inch，PPI）
- 二.設備像素比率（Device Pixel Ratio，DPR）
- 三.設備像素/css像素
- 四.各路單位掃盲＋分析
- 五.viewport相關
- 六.width和device－width
一.單位英寸像素數（Pixel Per Inch，PPI）
PPI是一個度量單位，是像素密度單位，它表示了現實世界一英寸內的像素數，因此它決定了屏幕的顯示質量。
像我們常說的1024*768其實是指的屏幕分辨率，對應在現實中的分辨率就用PPI作為度量單位，可以舉個例子來說明：
｜－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－｜
｜如果顯示器的屏幕大小是14英寸（對角線的長度）縱橫比是3:4－－>
｜那么水平方向上的長度就為：14*（4/5）＝11.2 英寸 （1英寸＝0.762寸）
｜從而我們常說的1024對應現實世界的分辨率就為：1024/11.2 ＝ 91.4PPI
｜－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－｜
所以通常要分辨清楚，像我們說的1024*768和iPhone5s的640*1136他們不是對應PPI這個單位的。
正是因為不相同，存在這樣的對應關系，所以在終端上必要的時候就會做PPI的適配，以Retina屏為例子：
－－>我們不想文字在Retina屏上變小（因為在相同尺寸的屏幕下，Retina屏擁有比非Retina屏更多的物理像素，就是我們現實世界中的像素數，所以相同大小的字在Retina下會變小），所以為了做適配，我們可以采用類似媒體查詢的辦法來改變字體的大小。
｜－PS－｜：Retina顯示屏
定義：就是具備足夠高像素密度而使到人體肉眼無法分辨其中單獨像素點的液晶屏，就像最早的iPhone4的屏幕。它的屏幕分辨率為960×640（每英寸像素數326ppi）。
我覺得最大的區別就是：因為我們看到的圖像都是通過物理像素呈現的，所以像素越密集圖像就越清晰，而所謂的Retina顯示屏就是在相同尺寸的屏幕下比非Retina的屏幕具備更多的物理像素。
二.設備像素比率（Device Pixel Ratio，DPR）
定義：
devicePixelRatio指的是window.devicePixelRatio, 被所有WebKit瀏覽器以及Opera所支持，window.devicePixelRatio是設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例，即：devicePixelRatio=設備物理像素/設備獨立像素。
它表示的就是物理像素與邏輯像素（px）的對應關系。
舉個例子：
以iPhone為例，retina下devicePixelRatio=1，非retina下devicePixelRatio=2，這是因為無論是retina還是非retina屏，豎屏下，設備獨立像素都是320，而它們的設備物理像素分別為640、320。
這邊還有更加詳細的相關閱讀：設備像素比devicePixelRatio的簡單介紹 devicePixelRatio＝1.5引發的問題
於是也就有了DPR適配的問題，因為存在設備像素比率這個東西，所以當我們遇到那個經典的1px問題（無非就是設計師希望在任何的屏幕上都有一條1物理像素的邊），要做的就多了。
三.設備像素/css像素
要先說下分辨率（Resolution），它就是指屏幕區域的寬高所占的像素數。分辨率說全了就是設備的分辨率，這兩個是一回事。這個分辨率是指每英寸的面積上可產生的像素點，分辨率越高代表可以將畫面顯示的更精細（有時候獲取的顯示器分辨率，其實是指桌面設定的分辨率，而不是顯示器的物理分辨率。大多數情況下，我們設置的分辨率與物理分辨率一致，顯示效果才最佳）。
其實這里說的分辨率（Resolution）在絕大多數的情況下跟我們題目上的設備像素是一個東西，名字的不同而已。
好，下面就專心說設備像素/css像素。
1.我們姑且認定設備的pixels為正確（標准）的pixels寬度。這些pixels決定了你工作所用的那些設備上正式的分辨率。在大多數情況下，能夠從screen.width/height上取出具體值；
2.現代瀏覽器上的縮放，是基於“伸展”pixels。結果是，html元素上的寬度並沒有因為縮放200%而由128pix變成256px，而是真實的pixels的被計算成了雙倍。html元素在形式上依然是128CSS的pixels，即便它占用了256設備的pixels；
3.圖例：
下列圖片將清楚的解釋這個概念。如圖,有4個1像素，縮放為100%的html元素，CSS的pixels完整的和設備的pixels重疊
當我們縮小瀏覽器時，CSS的pixels開始收縮，導致1單位的設備的pixels上重疊了多個CSS的pixels，如下圖:
同理，放大瀏覽器時，相反的事情發生了，CSS的pixels開始擴大，導致1單位的CSS的pixels上重疊了多個設備的pixels，如下圖：
4.總體而言，你只需要關注CSS的pixels，這些pixels指定你的樣式被如何渲染，設備的pixels幾乎對你毫無用處。但對用戶而言卻不是這樣。用戶會縮放頁面，直到他能舒服的閱讀內容。但是你不需關心這些縮放級別。瀏覽器會自動的保證你的CSS的pixels會被伸展還是收縮；
5.在縮放級別為100%時，1單位的CSS的pixel是嚴格相等於1單位的設備pixel。
6.上面有說道，頁面的清晰和模糊其實可以通過設備像素和css像素的關系來解釋。那么這里也要注意下Retina屏，不然稍不注意，圖可能會糊掉。
非retina屏下，一個css像素“覆蓋”在一個設備物理像素上；
retina屏下，一個css像素“覆蓋”在四個設備物理像素上，實質是一個css像素被瓜分成了四份，效果就變糊了。
原理就像下面這樣：
四.各路單位掃盲＋分析
1.em
em是相對單位，參考物是父元素的font-size，同百分比方式的單位相同，具有繼承的特點，如果字體大小是16px（瀏覽器的默認值），那么 1em = 16px。 如果父元素設置了font-size:62.5%，那么相應的1em=10px了。
這里有篇文章研究的比較仔細：關於webapp中的文字單位的一些倒騰
2.rem
rem也是相對單位，不過總是相對於根元素的字體大小，也就是<html>元素。
現在越來越多的人采用rem在不同的設備間進行布局了，可以通過js動態的改變<html>元素的font-size，或是通過媒體查詢來動態改變<HTML>元素的font-size的大小，來適配不同設備的不同屏幕大小，實現跨終端的目的，而且支持度也越來越好了。
3.vw和vh
vw Viewport寬度， ** 1vw ** 等於viewport寬度的1%；
vh Viewport高度， ** 1vh ** 等於viewport高的的1%；
4.vmin和vmax
vw和vh對應於viewport的width和height，而vmin和vmax分別對應於width、height中的最小值和最大值，例如如果瀏覽器的寬/高被設置為1000px/600px，那么
1vmin = 600 * 1/100;
1vmax = 1000 * 1/100
MSDN上有更為詳盡的解釋：http://msdn.microsoft.com/en-us/magazine/jj687762.aspx
五.viewport相關
｜－視口viewport（這里且先說pc相關的viewport）－｜
viewport的定義是嚴格的等於瀏覽器的窗口，它不是一個HTML的概念，所以我們不能通過css去修改它。
實際上，viewport的功能在於控制網站的最高block容器，那就是<html>元素。也就是說<html>元素為viewport寬度的100%。雖然我們知道document.documentElement實際上就是<html>元素，但是document.documentElement. clientWidth/Height給出的實際是viewport的尺寸，而不是<html>元素，不管<html>元素的尺寸如何改變，都只會得到viewport的尺寸。那我們該如何獲取<html>元素的尺寸呢，可以使用document.documentElement.offsetWidth/Height，但還是有bug，IE用這個值標示viewport的尺寸而非<html> 。
｜－viewport（然后放開了的說下我學習和理解到的跨終端相關的viewport）－｜
1.兩種viewport：
虛擬的viewport＃visualviewport －－visualviewport是當前顯示在屏幕上的部分頁面。用戶會滾動頁面來改變可見部分，或者縮放瀏覽器來改變visualviewport的尺寸。window.innerWidth/Height返回visualviewport的尺寸。
布局的viewport＃layoutviewport－－css布局通常都是按照layoutviewport來定義，而且比visualviewport寬很多。同時<html>元素的寬度也是繼承於layoutviewport。那么layoutviewport有多寬呢？每個瀏覽器都不同。iPhone上的Safari使用980px、Opera 850px，安卓的Webkit核心800px，IE974px。瀏覽器已經選擇好他們的layoutviewport的尺寸，它完整的覆蓋了最小縮放模式下的移動瀏覽器的屏幕。document.documentElement.clientWidth/Height傳遞layoutviewport的尺寸。
2.和pc瀏覽器一樣，screen.width/height標示了設備屏幕的尺寸，以設備的pixels度量。如果需要知道當前visualviewport相對於layoutviewport的距離。這就是滾動位移，如同在桌面瀏覽器一樣，使用window.pageX/YOffset存儲。和在桌面系統一樣,document.documentElement.offsetWidth/Height給出了<html>元素以CSS的pixels度量的尺寸。
上面內容只是基本，並不完整，不同瀏覽器的兼容問題還需要進一步研究，詳細閱讀請看：A Table of two viewports－part one 當然第二部分也非常值得一看： A Table of two viewports－part two
quirksmode上的一個非常全的viewport相關的兼容性表，可用於適配時查看：http://www.quirksmode.org/mobile/tableViewport.html
其中涉及到的頁面元素大小偏移相關我之前也有整理,沒那么深入，倒也通俗易懂： 頁面元素坐標和偏移相關整理
六.width和device－width
我了解到的定義是：
+－－width/height使用以CSS的pixels度量的layoutviewport，通俗的說就是頁面內容的寬度；
+－－device-width/height使用以設備的pixels度量的設備屏幕（device screen）；
#－－width/height 反映document. documentElement. clientWidth/Height的值；
#－－device-width/height 反映screen.width/height；
但上面只是普遍情況，如果稍在ios設備下嘗試下，就能發現事實跟上面說的不一樣。
在某些設備下：screen.width == 設備的物理分辨率 / window.devicePixelRatio。具體情況還需要詳細的測試。
上面也還只是列出了相關問題的基本了解與學習，在這個過程中更加發現，需要深入研究與學習的知識點還是很多的。
比如說<META>標簽相關，還有1px的問題，都是值得深入學習的。
后續繼續持續學習，逐步完善。