摘要：目錄移動端開發(fā)的基本觀點(diǎn)像素基礎(chǔ)知識原理解析彈性布局響應(yīng)式設(shè)計的運(yùn)用移動端的事件庫的使用移動端開發(fā)的基本觀點(diǎn)移動端開發(fā)的意義移動端用戶使用量市場需求市場供給公司需要移動端開發(fā)人才工資高，就業(yè)易涌現(xiàn)大波程序猿到了猴年馬月，工資才會

移動端開發(fā)的基本觀點(diǎn)

像素基礎(chǔ)知識

viewport原理解析

彈性布局

響應(yīng)式設(shè)計

1rem的運(yùn)用

移動端的事件

zepto庫的使用

移動端開發(fā)的基本觀點(diǎn)

移動端開發(fā)的意義
移動端用戶使用量 -> 市場需求 -> 市場供給 -> 公司需要移動端開發(fā)人才 -> 工資高，就業(yè)易 -> 涌現(xiàn)大波程序猿 -> 到了猴年馬月，工資才會降下來 -> 新的技術(shù)涌現(xiàn)，VR/AI -> 市場需求攀升 -> 重走一波老路......

扯遠(yuǎn)了，以上大致就是學(xué)習(xí)移動端開發(fā)的動機(jī)；

移動端開發(fā)的認(rèn)識
移動端開發(fā)就是手機(jī)端開發(fā)嗎？

No、No、No...
移動端是一個大的范疇，小羊認(rèn)為應(yīng)該包括智能手機(jī)、平板在內(nèi)的移動設(shè)備，主要是這兩者；

移動端開發(fā)入門的學(xué)習(xí)路徑
目錄就是

像素基礎(chǔ)知識

先拋3個概念，
px(CSS pixels)：虛擬像素，可以理解為“直覺”像素，我要這個元素寬高10px；
dp(device pixels)：設(shè)備像素（物理像素），可以理解為實(shí)際的像素，這個寬高為10px的元素在設(shè)備中實(shí)際用了多少個物理像素點(diǎn)表示；
dpr(device pixels ratio)：設(shè)備像素比，公式為1px = (dpr)^2 * 1dp，可以理解為1px由多少個設(shè)備像素組成；

3個概念整合理解就是：
我為一個元素設(shè)置的寬高為10px，那么實(shí)際在顯示設(shè)備中用多少個設(shè)備像素真實(shí)表示呢？
dpr=2的話，那么1px由4個設(shè)備像素顯示，如果是10px，那么顯示設(shè)備實(shí)際用40個dp去顯示10px；
dpr=1，則1px由1個設(shè)備像素顯示；
px和dp的區(qū)別就是直覺認(rèn)為只有10px和真實(shí)使用40dp；

為什么會出現(xiàn)dpr>=2的情形？dpr=1不是更加符合我的認(rèn)知和理解嗎？

還不是人們?yōu)榱俗非蟾叩姆直媛仕?，分辨率越高圖像越清晰?。。?；

但是Mac的Retina屏和一般PC的在相同尺寸下，圖像卻清晰許多，為腎？

dpr>=2所致?。。?！

別的品牌機(jī)子老老實(shí)實(shí)1px = 1dp，Mac卻是1px = 4 dp，所以你直覺認(rèn)為大家都使用同樣多的像素點(diǎn)表示圖像（這是沒錯滴），實(shí)際背后Mac用了多1倍（指的是dpr）的設(shè)備像素顯示圖像；

實(shí)際應(yīng)用中，顯示設(shè)備不會直接給你個px和dpr

你實(shí)際看到的是以下的參數(shù)，下面是腎6Plus的顯示屏參數(shù)信息：

再拋幾個概念，可別暈咯...

英寸：這里指的是屏幕主對角線的尺寸，1英寸=2.54cm，5.5英寸約等于14cm（13.97cm）

分辨率：1920*1080像素，這里指的是物理像素（設(shè)備像素）

ppi（pixels per inch）：每英寸的像素點(diǎn)，這里腎6Plus為每英寸有401個像素點(diǎn)

那么ppi是如何計算出來的呢？
顧名思義，每英寸的像素點(diǎn)（設(shè)備像素），已知屏幕分辨率和主對角線的尺寸，則ppi等于

var 斜邊尺寸 = V(1920^2+1080^2) V代表開根號
var ppi = 斜邊尺寸/5.5
ppi = 401ppi

現(xiàn)在我們知道，ppi越高，每英寸像素點(diǎn)越多，圖像越清晰；

和先前的知識點(diǎn)有什么關(guān)系？

畢竟這些參數(shù)是外國人先發(fā)明的，他們會優(yōu)先選擇自己熟悉的計量單位作為顯示設(shè)備的工廠標(biāo)準(zhǔn)參數(shù)，因此ppi就用作顯示設(shè)備的工業(yè)標(biāo)準(zhǔn)；

告訴業(yè)界人士，ppi達(dá)到多少是高清屏，此時對應(yīng)的dpr是多少，而不直接告訴你我現(xiàn)在的顯示設(shè)備dpr是多少

畢竟人們直接聽到像素分辨率會更加有反應(yīng)

下面是不同ppi對應(yīng)的dpi：

【注】Retina屏都是dpr>=2的高清屏

腎6Plus的dpr為3，是超高清屏；

到目前為止，我們了解到：
給你一個顯示設(shè)備，設(shè)備分辨率為1920*1080，尺寸為5.5英寸，可以計算出其ppi = 401，根據(jù)ppi得知其dpr = 3，
由此可以該設(shè)備1px = （3^2）dp，其虛擬像素為1920/3 = 660px，1080/3 = 360px，即虛擬分辨率為360*660；
此時，如果你在代碼設(shè)置元素的寬高為360*660到的話，會發(fā)現(xiàn)它的實(shí)際尺寸就等于腎6Plus的屏幕尺寸；
【ppi】

viewport原理解析

一個很有意思的現(xiàn)象是，當(dāng)你把上面的代碼在chrome下使用設(shè)備模擬方式，模擬腎6Plus的時候，神奇的事情發(fā)生了，該元素設(shè)置的寬高明明就是手機(jī)的寬高，按常理應(yīng)該占據(jù)整個屏幕，實(shí)際卻是：

究竟是怎么一回事？，如何解決這一問題呢？

好吧，作為實(shí)用主義者的你們（不是我喲），先講解決方案：

在meta標(biāo)簽有一個viewport的屬性，可以為這個屬性設(shè)置width；
腎6Plus默認(rèn)的width是980px，所以元素寬是360px，實(shí)際顯示的尺寸是360px*360/980=132.24px（不信可以自己測試一下喲）；

現(xiàn)在只要將viewport的width設(shè)置為360px，那么元素就可以占滿全屏了；

現(xiàn)在就要引入另一個概念：viewport

viewport的原理在于：

先將頁面渲染在一個width為顯示設(shè)備默認(rèn)尺寸的viewport上，如腎6Plus為980px；

然后將viewport等比例縮放至整個手機(jī)屏幕上；

例如上例中，元素寬高為360*600px，先將元素渲染在寬度為980px的viewport上，然后等比例縮放在整個手機(jī)屏幕上；

viewport就是連接手機(jī)屏幕和頁面的中間層
為什么要多此一舉呢？

想象一下，如果沒有中間層，直接將一個頁面寬度為980px的直接縮放至320px，那么里面的DOM節(jié)點(diǎn)將會進(jìn)行重繪，很有可能導(dǎo)致排版錯亂；
viewport的作用是將所有的DOM節(jié)點(diǎn)先繪在寬度為980px的viewport上，然后整個viewport統(tǒng)一縮放，這樣就能保證排版的正確性；

關(guān)于viewport，涉及兩個概念：

layout viewport：布局viewport，可以理解為放置頁面的幕布

visual vewport：視窗viewport，可以理解為屏幕的視窗
比如：

腎6Plus的visual viewport的寬度為360px，layout viewport為980px；
360px是屏幕視窗的虛擬像素，980px是放置頁面的像素；

回顧一下，前面元素出現(xiàn)的縮放現(xiàn)象：

根據(jù)腎6Plus的物理分辨率1920*1080以及5.5英寸的屏幕，計算出ppi = 401-> dpr = 3 -> 虛擬分辨率為640*360px；

畫一個寬度為360px的元素，理應(yīng)充滿整個手機(jī)屏幕 ，但是由于viewport的作用 -> 360px的元素畫在980px的layout viewport上，然后等比例縮放在360px的visual viewport上-> 最終你看到的就是，360px的元素?zé)o法填充整個屏幕；

先前的一個解決辦法是，改變layout viewport，即，讓整個layout viewport就是360px，那么元素將填充整個屏幕；

以上都是世界觀，給人一些概念性的理解，無法實(shí)操，下面就是方法論

實(shí)際移動端開發(fā)，我們只需關(guān)注layout viewport，知道每個移動設(shè)備提供給我們多大尺寸的幕布，但是移動設(shè)備型號那么多，不可能一個個手動設(shè)置width呀?。?！

動態(tài)設(shè)置layout viewport

上面的設(shè)置表示讓layout viewport總是等于設(shè)備寬度，即visual viewport；

【注】細(xì)心的童鞋可能會注意到，腎6Plus的虛擬分辨率為什么不是640*360px，具體解答可以參考知乎問答

獲取visual viewport和layout viewport的api

window.innerWidth：表示窗口的寬度（包含滾動條），即visual vewport的寬度
document.body.clientWidth：表示body元素的寬度（不包括border），即layout viewport的寬度

移動端其他初始化設(shè)置

intial-scale:頁面首次顯示時，可視區(qū)域的縮放級別，取值1.0則頁面按實(shí)際尺寸顯示，無任何縮放；
no-scalable：是否允許縮放

一個完整的viewport屬性的設(shè)置為：

上述完整的意思是，layout viewport等于設(shè)備的寬度，首次顯示頁面時不進(jìn)行縮放也不允許用戶縮放；

demo

小結(jié)

一開始講px/dp/dpr/ppi的意義在于鋪墊背景知識

理解上述知識后，給你一個移動設(shè)備的物理分辨率，如iPhone6 Plus19201080以及尺寸5.5inches，可以計算出其ppi為401->dpr = 3，從而測算出手機(jī)的虛擬分辨率為640360px；

原則上，你開發(fā)一個640*360px的元素就可以填充整個手機(jī)屏幕，但是由于viewport機(jī)制作用，效果未達(dá)預(yù)期

由此引出viewport概念，viewport可以分為visual viewport（視窗尺寸）和layout viewport（放置頁面的“幕布“），iPhone6 Plus默認(rèn)值為980px；

通過meta標(biāo)簽的viewport屬性，可以動態(tài)設(shè)置layout viewport，實(shí)戰(zhàn)中只需要設(shè)置：

你還可以通過window.innerWidth和document.body.clientWidth（前提是不設(shè)置body的寬度）分別獲取visual viewport和layout viewport；