目錄

• 移動端開發(fā)的基本觀點(diǎn)
• 像素基礎(chǔ)知識
• viewport原理解析
• 彈性布局
• 響應(yīng)式設(shè)計(jì)
• 1rem的運(yùn)用
• 移動端的事件
• zepto庫的使用

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

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

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

像素基礎(chǔ)知識

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

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

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

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

但是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è)備不會直接給你個(gè)px和dpr

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

再拋幾個(gè)概念，可別暈咯...

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

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

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

那么ppi是如何計(jì)算出來的呢？
顧名思義，每英寸的像素點(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)先選擇自己熟悉的計(jì)量單位作為顯示設(shè)備的工廠標(biāo)準(zhǔn)參數(shù)，因此ppi就用作顯示設(shè)備的工業(yè)標(biāo)準(zhǔn)；

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

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

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

|ldpi|mdpi|hdpi|xhdpi
---|---|---|---|---
ppi|120|160|240|320
默認(rèn)縮放比|0.75|1.0|1.5|2.0

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

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

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

viewport原理解析

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

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

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

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

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

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

viewport的原理在于：

1. 先將頁面渲染在一個(gè)width為顯示設(shè)備默認(rèn)尺寸的viewport上，如腎6Plus為980px；
2. 然后將viewport等比例縮放至整個(gè)手機(jī)屏幕上；

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

viewport就是連接手機(jī)屏幕和頁面的中間層

為什么要多此一舉呢？

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

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

• 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英寸的屏幕，計(jì)算出ppi = 401-> dpr = 3 -> 虛擬分辨率為640*360px；

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

先前的一個(gè)解決辦法是，改變layout viewport，即<meta name="viewport" content="width=360">，讓整個(gè)layout viewport就是360px，那么元素將填充整個(gè)屏幕；

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

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

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

<meta  name="viewport" content="width=device-width">

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

iPhone 6 Plus

Galaxy S5

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

• 獲取visual viewport和layout viewport的api

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

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

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

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

<meta  name="viewport" content="width=device-width,initial-scale=1,no-scalable=no">

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

demo

小結(jié)

• 一開始講px/dp/dpr/ppi的意義在于鋪墊背景知識
• 理解上述知識后，給你一個(gè)移動設(shè)備的物理分辨率，如iPhone6 Plus19201080以及尺寸5.5inches，可以計(jì)算出其ppi為401->dpr = 3，從而測算出手機(jī)的虛擬分辨率為640360px；
• 原則上，你開發(fā)一個(gè)640*360px的元素就可以填充整個(gè)手機(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è)置：

<meta  name="viewport" content="width=device-width,initial-scale=1,no-scalable=no">
```，那么你在開發(fā)中寫元素寬度為360px，實(shí)際在手機(jī)就顯示為360px；
- 你還可以通過`window.innerWidth和document.body.clientWidth（前提是不設(shè)置body的寬度）`分別獲取visual viewport和layout viewport；

---

下次講解彈性布局和響應(yīng)式設(shè)計(jì)...