目錄

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

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

1. 移動端開發(fā)的認(rèn)識
   移動端開發(fā)就是手機端開發(fā)嗎罪帖？
   No佛寿、No晦攒、No...
   移動端是一個大的范疇兵志，小羊認(rèn)為應(yīng)該包括智能手機疾棵、平板在內(nèi)的移動設(shè)備金蜀，主要是這兩者竞惋；

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

像素基礎(chǔ)知識

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

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

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

還不是人們?yōu)榱俗非蟾叩姆直媛仕拢直媛试礁邎D像越清晰８邸Ｒ琛！朦肘；

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

dpr>=2所致暗芏稀！Ａ旖ⅰ夫嗓！

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

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

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

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

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

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

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

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

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

現(xiàn)在我們知道开睡，ppi越高，每英寸像素點越多苟耻，圖像越清晰篇恒；

和先前的知識點有什么關(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：

|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寻咒，是超高清屏哮翘；

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

viewport原理解析

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

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

好吧兆解，作為實用主義者的你們（不是我喲）馆铁，先講解決方案：

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

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

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

viewport的原理在于：

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

例如上例中扛点，元素寬高為360*600px哥遮，先將元素渲染在寬度為980px的viewport上，然后等比例縮放在整個手機屏幕上陵究；

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

為什么要多此一舉呢眠饮？

想象一下，如果沒有中間層铜邮，直接將一個頁面寬度為980px的直接縮放至320px仪召，那么里面的DOM節(jié)點將會進行重繪，很有可能導(dǎo)致排版錯亂松蒜；
viewport的作用是將所有的DOM節(jié)點先繪在寬度為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)充滿整個手機屏幕 ，但是由于viewport的作用 -> 360px的元素畫在980px的layout viewport上殖演，然后等比例縮放在360px的visual viewport上-> 最終你看到的就是氧秘，360px的元素?zé)o法填充整個屏幕；

先前的一個解決辦法是趴久，改變layout viewport丸相，即<meta name="viewport" content="width=360">，讓整個layout viewport就是360px彼棍，那么元素將填充整個屏幕灭忠；

以上都是世界觀，給人一些概念性的理解座硕，無法實操弛作，下面就是方法論

實際移動端開發(fā)，我們只需關(guān)注layout viewport华匾，知道每個移動設(shè)備提供給我們多大尺寸的幕布映琳，但是移動設(shè)備型號那么多，不可能一個個手動設(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:頁面首次顯示時稍味，可視區(qū)域的縮放級別咸产，取值1.0則頁面按實際尺寸顯示，無任何縮放仲闽；
no-scalable：是否允許縮放

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

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

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

demo

小結(jié)

• 一開始講px/dp/dpr/ppi的意義在于鋪墊背景知識
• 理解上述知識后屑彻，給你一個移動設(shè)備的物理分辨率，如iPhone6 Plus19201080以及尺寸5.5inches顶吮，可以計算出其ppi為401->dpr = 3社牲，從而測算出手機的虛擬分辨率為640360px；
• 原則上悴了，你開發(fā)一個640*360px的元素就可以填充整個手機屏幕搏恤，但是由于viewport機制作用，效果未達(dá)預(yù)期
• 由此引出viewport概念湃交，viewport可以分為visual viewport（視窗尺寸）和layout viewport（放置頁面的“幕布“）熟空，iPhone6 Plus默認(rèn)值為980px；
• 通過meta標(biāo)簽的viewport屬性搞莺，可以動態(tài)設(shè)置layout viewport息罗，實戰(zhàn)中只需要設(shè)置：

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

---

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