? ? ? ?最近幾天在搭建博客，在做前端頁(yè)面的時(shí)候因?yàn)橐龀杉嫒輕c端和移動(dòng)端的響應(yīng)式，對(duì)于我這樣的菜逼來(lái)說(shuō)沒(méi)有接觸過(guò)移動(dòng)端，就在網(wǎng)上搜索了大量的資料，終于，終于，終于入門(mén)了。。。。
? ? ? ? 先放上各種資料的連接,請(qǐng)按照我整理的順序看這些資料，非常受益。因?yàn)槲抑篮芏嗲岸碎_(kāi)發(fā)人員，甚至是老手，他們?cè)谧鲆苿?dòng)端的時(shí)候不管三七二十一都會(huì)加上一個(gè)meta，作為新世紀(jì)的前端，我們要知其然知其所以然
3、使用Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配
4、[]
? ? ? ? 在看下面的解釋的時(shí)候最好先看一下我上面羅列的第二項(xiàng)，好了，下面我將解釋：為什么同樣大小的像素(比如14px)在移動(dòng)端（看起來(lái)小）和pc端看起來(lái)不一樣？
像素的相關(guān)詞
ppi （Pixels Per Inch）
也叫像素密度，所表示的是每英寸所擁有的像素?cái)?shù)量。密度越高，擬真越強(qiáng)。移動(dòng)設(shè)備通常會(huì)給出對(duì)角線的長(zhǎng)度（單位英寸），和長(zhǎng)*寬的分辨率，所以根據(jù)公式可以算出ppi：
同理，如果只給出了設(shè)備長(zhǎng)（單位英寸）和長(zhǎng)度分辨率（單位像素），也同樣可以算出來(lái)。
PPI=√(X2+Y2)/?Z?(X:長(zhǎng)度像素?cái)?shù);Y:寬度像素?cái)?shù);Z:屏幕尺寸)
dpi (Dots Per Inch）
? ? ? ?這是和ppi容易混淆到一起的概念。指打印設(shè)備每英寸印刷出來(lái)的點(diǎn)有多少個(gè),同一張圖片打印出來(lái)和在電腦上看到的清晰度就不一定相同。因?yàn)椴挥绊懳覀兝斫?，有一些博客又喜歡混用，作為只跟電子屏打交道的前端開(kāi)發(fā)，認(rèn)為各大博客上的dpi=ppi就好。
dpr （device-pixel-ratio: Number of device pixels per CSS Pixel）
? ? ? ? dpr可以用window.devicePixelRatio得到，是設(shè)備上物理像素和設(shè)備獨(dú)立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / css像素
大家通常指的dpr是個(gè)固定值：dpr的值表示在理想布局寬度（ideal viewport）里，使用多少個(gè)物理像素來(lái)渲染一個(gè)設(shè)備獨(dú)立像素。
在ios中，dpr通常是1，2，3；但是在android中，ideal viewport會(huì)根據(jù)瀏覽器自己的喜好變化，甚至?xí)切?shù)?，F(xiàn)在andorid注重高分辨率，很多都達(dá)到3了。
? ? ? ?為什么同樣大小的字體（比如14px）或者同一個(gè)app的icon在不同的移動(dòng)設(shè)備下人眼看起來(lái)的大小不一樣？
? ? ? ?答：其實(shí)這個(gè)問(wèn)題等價(jià)于一個(gè)css像素在兩個(gè)設(shè)備中分別等價(jià)于多少英寸。如果網(wǎng)頁(yè)是在ideal viewport下，可以推理出一個(gè)公式：每個(gè)物理像素等于1/PPI()英寸)，在ideal viewport下，DPR表示1個(gè)css像素由幾個(gè)物理像素組成。因此,得到公式：
（1/PPI）* DPR = DPR/PPI
? ? ? ? ?舉個(gè)例子：iphone6-PPI為326，DPR為2，DPR/PPI約等于0.0061;iphone6S-PPI為401，DPR為3，DPR/PPI約等于0.0075；所以iphone6s上的app和字比iphone6大哦。
? ? ? ? ?通常，設(shè)備顯示屏越大，一個(gè)css像素代表的物理尺寸需要大一點(diǎn)。因?yàn)槿搜蹠?huì)離大屏幕的比較遠(yuǎn)，離小屏幕的比較近。雖然物理尺寸不一樣，但是人眼感覺(jué)起來(lái)是差不多大的。
14寸筆記本的ppi大約是112,因此分母小，所以pc端上看起來(lái)很大
