目錄
1、移動端開發的基本觀點
2、像素基礎知識
3、viewport原理解析
4、彈性布局
5、響應式設計
6、1rem的運用
7、移動端的事件
8、zepto庫的使用
一、移動端開發的基本觀點
移動端開發就是手機端開發嗎？首先回答是否定的，移動端是一個大的范疇，應該包括智能手機以及平板電腦在內的所有移動設備，但主要是這兩者。
二、像素基礎知識
2.1、設備像素
設備像素（Device Pixels）：設備屏幕的物理像素，設備能控制顯示的最小單位，我們可以把這些像素看作成顯示器上一個個的點。
2.2、CSS像素
CSS像素（CSS Pixels）：是Web編程的概念，指的是CSS樣式代碼中使用的邏輯像素。
所以，1個CSS像素在不同設備上可能對應不同的物理像素，這個比值是 是設備的屬性（Device Pixel Ratio，設備像素比）。
在CSS規范中，長度單位可以分為絕對單位和相對單位。px是一個相對單位，相對的是設備像素（Device Pixels）。
比如iPhone5使用的是Retina視網膜屏幕，用2x2px的Device Pixel代表1x1px的CSS Pixel，所以設備像素數為640x1136px，而CSS邏輯像素數為320x568px。
為了更清晰的理解設備像素和CSS像素，接下來的兩幅圖說明了當用戶縮放的時候會發生什么。
第一幅圖展示的是當用戶進行縮小操作的時候設備像素（深藍色背景）和CSS像素（半透明前景）的樣子。CSS像素變得小了；一個設備像素覆蓋了多個CSS像素。
第二幅圖展示的當用戶進行放大操作時候設備像素和CSS像素的樣子。一個CSS像素現在覆蓋了多個設備像素。
2.3、分辨率
分辨率（Resolution）也是一個物理概念，含義要看對誰。
對于屏幕，分辨率一般表示屏幕上顯示的物理像素總和。比如，我們說iPhone6屏幕分辨率是750x1334px。
對于圖像，概念等同于圖像尺寸、圖像大小、像素尺寸等等。比如，我們說20x20px的icon。
其實嚴格來說，圖像分辨率的單位是ppi（Pixels Per Inch），對于一個圖片文件，其像素尺寸是一定的，可能含有來自相機的meta信息，比如分辨率200ppi，該值只是個建議值，圖片顯示出來我們看到的尺寸由屏幕像素密度決定，像素密度越高，圖片看起來越小。
2.4、設備像素比
設備像素比縮寫為DPR或者DPPX，如下：
- Device Pixel Ratio: Number of device pixels per CSS Pixel
- Dots Per Pixel: the amount of device pixels per CSS pixel (e.g. in Retina displays this will be 2).
設備像素比表示1個CSS像素（寬度）等于幾個物理像素（寬度）：
DPR = 物理像素數 / 邏輯像素數
比如dpr=2時，1個CSS像素由4個物理像素點組成。
DPR不是單位，而是一個屬性名，比如在瀏覽器中通過window.devicePixelRatio獲取屏幕的DPR
2.5、像素密度
像素密度也叫顯示密度或者屏幕密度，縮寫為DPI(Dots Per Inch)或者PPI(Pixel Per Inch)，含義相同
專業的一般說PPI，細微差異如下：
ppi和dpi（每英寸點數）。從技術角度說，“像素”（p）只存在于計算機顯示領域，而“點”（d）只出現于打印或印刷領域。
經常看到相同尺寸的屏幕像素尺寸卻不同，也就是DPI的差異，比如4.7英寸的iPhone6像素尺寸為750x1334px，而4.7英寸的HTC One像素尺寸為1080x1920px。
像素密度很容易算出來，比如iPhone6的：
// 屏幕對角線的像素尺寸 / 物理尺寸（inch）
Math.sqrt(750*750 + 1334*1334) / 4.7 = 326ppi
2.6、設備獨立像素
一般指Google提出的用來適配Android海量奇怪屏幕的，Windows也有這個概念，但含義不同，IOS好像沒有設備獨立像素一說。
設備獨立像素作為單位，一般是指Android開發中的東西，縮寫為DIP(Device Independent Pixels)或者DP(Density-independent Pixels)，含義完全一致
Android設備的特點是屏幕尺寸很多，因此為了顯示能盡量和設備無關，提出了dip，參照的density是160。計算公式為：
// 當屏幕密度為160（單位是ppi或者dpi，一個意思）時，px === dip
px = dip * density / 160
// 所以
dip = px * 160 / dpi
當然，這兩個式子都只適用于Android設備，這個dip拿到其它地方去沒什么意義。
2.7、下面就是應用了
實際開發中，設計師和前端工程師之間的協同是這樣的：
一般由設計師按照設備像素(Device Pixel)為單位制作設計稿。
前端工程師，參照相關的設備像素比(Device Pixel Ratio)，進行換算以及編碼。
我們就拿iPhone 6s來說：
可以看到，其分辨率為1334*750px，設備尺寸為4.7英寸，可以計算出ppi為326，查資料得知其dpr為2，可以得到對于該設備1個CSS像素數對應4個設備像素點顯示，所以iPhone 6s的虛擬像素為寬750/2=375px，高1334/2 = 667px，即虛擬分辨率為667*375px。
此時，我們如果在代碼中設置元素的寬高為667*375px的話，會發現它的實際尺寸就等于iPhone 6s的屏幕尺寸。
三、viewport原理解析
桌面上視口寬度等于瀏覽器寬度，但在手機上有所不同。
布局視口
手機上為了容納為桌面瀏覽器設計的網站，默認布局視口寬度遠大于屏幕寬度，為了讓用戶看到網站全貌，它會縮小網站視覺視口
屏幕的可視區域，即物理像素尺寸理想視口
當網站是為手機準備的時候使用。通過meta來聲明。早期iPhone理想視口為320x480px
所以，在沒有縮放的情況下，屏幕的CSS像素寬度其實是指理想視口的寬度，而meta標簽：
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
指定了布局視口=理想視口，并且禁止縮放。所以添上width=device-width的viewport meta后頁面變大了（一開始頁面內容小得看不清），實際上是布局視口變小了。
