移動(dòng)開(kāi)發(fā)的頁(yè)面越來(lái)越多，然而關(guān)于頁(yè)面尺寸、適配的問(wèn)題也是我們經(jīng)常遇到的，我也是出于混亂狀態(tài)，在網(wǎng)上也看到了很多博客，越看月有些凌亂，所以就自己整理一下有關(guān)移動(dòng)開(kāi)發(fā)的知識(shí)

一、像素

什么是像素？

像素就是圖像元素（picture element）,即一個(gè)像素就是計(jì)算機(jī)屏幕所能顯示一種特定顏色的最小區(qū)域

像素分為兩類(lèi)：

1、設(shè)備像素（device pixel）:指的就是設(shè)備的物理像素，對(duì)于任何一個(gè)設(shè)備他的物理像素的個(gè)數(shù)是不變的。

2、css像素：這是一個(gè)抽象的概念，是專(zhuān)門(mén)為我們web開(kāi)發(fā)提供的。

設(shè)備像素和css像素兩者的關(guān)系：在縮放比例為1:1的前提下。

1、在PC端的瀏覽器下，一個(gè)css像素對(duì)應(yīng)一個(gè)device-pixel。

2、在移動(dòng)端的情況下，會(huì)具體根據(jù)屏幕的特性（比如dpr）,一個(gè)css像素對(duì)應(yīng)的device-pixel的個(gè)數(shù)是不固定的。比如蘋(píng)果的Retina視網(wǎng)膜屏幕，一個(gè)css像素橫跨多個(gè)device-pixel。

總結(jié)：

1、像素分為設(shè)備像素和css像素

2、一個(gè)css像素大小是可變的。比如縮放頁(yè)面比例等。但設(shè)備像素是不會(huì)變的。

二、屏幕分辨率和屏幕尺寸

我們生活中買(mǎi)電視、筆記本經(jīng)常會(huì)聽(tīng)到分辨率，那么什么是分辨率？

定義：比如1920 x 1080 ?的分辨率，就是在一個(gè)移動(dòng)設(shè)備中，縱向有1920個(gè)物理像素塊，橫向有1080個(gè)像素塊。

屏幕尺寸就是屏幕對(duì)角線的長(zhǎng)度，比如通常我們說(shuō)的5.5的屏幕對(duì)角線長(zhǎng)度就是5.5英寸。

三、PPI 和 DPR

1、PPI(pixel per Inch) 每英寸像素?cái)?shù)量，也稱(chēng)屏幕像素密度。PPI 怎么計(jì)算呢？

2、以上計(jì)算出ppi是為了得到密度分界，獲得默認(rèn)縮放比例，即設(shè)備像素比DPR（device pixel ratio）

????由上圖可知，ppi在120-160之間的手機(jī)被歸為低密度手機(jī)，160-240被歸為中密度，240-320被歸為高密度，320以上被歸為超高密度（Apple給了它一個(gè)高大上的名字——Retina）。

????獲得設(shè)備像素比后，便可得知設(shè)備像素與CSS像素之間的比例。當(dāng)這個(gè)比率為1:1時(shí)，使用1個(gè)設(shè)備像素顯示1個(gè)CSS像素。當(dāng)這個(gè)比率為2:1時(shí)，使用4個(gè)設(shè)備像素顯示1個(gè)CSS像素，當(dāng)這個(gè)比率為3:1時(shí)，使用9（3*3）個(gè)設(shè)備像素顯示1個(gè)CSS像素。

而 ?CSS像素 =設(shè)備獨(dú)立像素 = 邏輯像素

比如做inpone的設(shè)備像素是750x1334,這就是UI需要設(shè)計(jì)的psd的大小，而前端人員需要根據(jù)dpr進(jìn)行css像素的換算。