摘要：表示單位面積上的物理像素點(diǎn)數(shù)目。比如原本像素高的頂部導(dǎo)航欄，在屏上用了個(gè)像素的高度來(lái)顯示。參考譯此像素非彼像素譯不是像素的像素不是像素移動(dòng)前端開(kāi)發(fā)之的深入理解移動(dòng)端尺寸基礎(chǔ)知識(shí)張?chǎng)涡裨O(shè)備像素比簡(jiǎn)單介紹

CSS 像素 是 Web 編程的概念，本質(zhì)上是為我們 Web 開(kāi)發(fā)者創(chuàng)建的一個(gè)抽象結(jié)構(gòu)，是相對(duì)的而不是絕對(duì)的。

物理像素 是物理概念，屏幕是由很多像素點(diǎn)組成的，各像素點(diǎn)通過(guò)發(fā)出不同顏色的光來(lái)呈現(xiàn)屏幕的色彩。它是物理的，隨著設(shè)備生產(chǎn)出來(lái)就已經(jīng)被確定下來(lái)了，比如 iPhone4 的屏幕分辨率為 640×960，就表示屏幕的橫向有 640 個(gè)像素點(diǎn)，縱向有 960 個(gè)像素點(diǎn)。

PPI（Pixels Per Inch）表示單位面積上的物理像素點(diǎn)數(shù)目。分辨率可以表示屏幕包含的像素?cái)?shù)目，但要想描述屏幕的顯示質(zhì)量，還需要知道屏幕尺寸，最后算出單位面積上的像素點(diǎn)數(shù)目。顯然 PPI 越高，屏幕顯示效果越細(xì)膩。

想要解釋 CSS 像素 和 物理像素 的關(guān)系也很簡(jiǎn)單，想想 PC 瀏覽器網(wǎng)頁(yè)上的縮放。如果用戶進(jìn)行放大操作，一個(gè)擁有 width: 300px 的元素將會(huì)占有屏幕越來(lái)越多的空間，以設(shè)備（物理）像素進(jìn)行度量的話就會(huì)變得越來(lái)越寬。但對(duì)于 CSS 像素來(lái)說(shuō)，無(wú)論怎樣，寬度的值還是 300px，縮放效果是通過(guò)盡可能的對(duì) CSS 像素進(jìn)行拉伸來(lái)實(shí)現(xiàn)的。

平時(shí)電腦屏幕的 1px CSS 像素對(duì)應(yīng) 1px 物理像素，所以感覺(jué)不到兩者的區(qū)別，會(huì)讓你誤以為CSS 里的 px 就是實(shí)際屏幕像素。而真實(shí)情況是：

當(dāng)縮放比例為 100% 時(shí)（不縮放），1px CSS 像素對(duì)應(yīng)屏幕物理像素 1px；

當(dāng)縮放比例大于 100% 時(shí)（放大），1px CSS 像素對(duì)應(yīng)大于 1px 的屏幕物理像素；

當(dāng)縮放比例小于 100% 時(shí)（縮?。?，1px CSS 像素對(duì)應(yīng)小于 1px 的屏幕物理像素。

下來(lái)的兩幅圖說(shuō)明了當(dāng)用戶縮放的時(shí)候會(huì)發(fā)生什么。第一幅圖展示的是當(dāng)用戶進(jìn)行縮小操作的時(shí)候設(shè)備像素（深藍(lán)色背景）和 CSS 像素（半透明前景）的樣子。CSS 像素變得小了；一個(gè)設(shè)備像素覆蓋了多個(gè) CSS 像素。第二幅圖展示的當(dāng)用戶進(jìn)行放大操作時(shí)候設(shè)備像素和CSS像素的樣子。一個(gè)CSS 像素現(xiàn)在覆蓋了多個(gè)設(shè)備像素。（圖左：放大網(wǎng)頁(yè)，圖右：縮小網(wǎng)頁(yè)）

過(guò)去 iPhone 3gs 分辨率是 320x480，和平時(shí)電腦屏幕一樣，1px CSS 像素對(duì)應(yīng) 1px 物理像素，開(kāi)發(fā)者開(kāi)發(fā)網(wǎng)頁(yè)時(shí)只要寫(xiě)上 CSS 像素 width:320px, height:480px 即可。但是，面對(duì)同樣屏幕尺寸的 iPhone 4/4s，分辨率提升到 640x960，難道要另外為它寫(xiě)一份網(wǎng)頁(yè)文檔設(shè)置 CSS 像素 width:640px, height:960px 來(lái)適配高分辨率嗎，顯然這是不實(shí)際的。如果繼續(xù)使用舊的網(wǎng)頁(yè)文件，在高分辨率的設(shè)備上，就會(huì)顯得很小，比如在分辨率為 320×480 的 iPhone 3GS 上，要畫(huà)一條長(zhǎng)度 1 英寸的線條，假設(shè)需要 163 個(gè)物理像素，即 CSS像素設(shè)成 163 像素即可；但是在分辨率為 640×960 的 iPhone4/4s 上，163 個(gè) CSS 像素所在手機(jī)表示實(shí)際長(zhǎng)度只有 iPhone3GS 的一半，即 0.5 英寸。如果照這種方式顯示，3GS 上剛剛好的效果，在 4/4s 上就會(huì)小到根本看不清了。

但是在現(xiàn)實(shí)中，這兩臺(tái)手機(jī)顯示的效果卻是一樣的！這是因?yàn)?Retina 屏幕把 2x2 個(gè)像素當(dāng) 1 個(gè)像素使用。比如原本 44 像素高的頂部導(dǎo)航欄，在 Retina 屏上用了 88 個(gè)像素的高度來(lái)顯示。如下圖：

這里提出邏輯像素的概念。蘋(píng)果使用了一套邏輯坐標(biāo)系統(tǒng)來(lái)解決多分辨率屏幕適配問(wèn)題，
例如：4/4s 的邏輯像素設(shè)為 320x480 points ，即物理屏幕上左上角為原點(diǎn)，橫向?yàn)?X 軸 320 points，縱向?yàn)?Y 軸 480 points，名為 point（即pt）單位就是上圖中的深灰色部分，顯然，PPI 越高的屏幕，1 point 覆蓋的物理像素就越多。Android 平臺(tái)也定義了邏輯像素單位，為device-independent pixel 即 dip 或 dp。說(shuō)實(shí)話，兩者其實(shí)是一回事。

設(shè)備像素比（devicePixelRatio）= 物理像素 / dp或pt。例如：
iPhone 4/4s 設(shè)備像素比：640 / 320 = 2

單位之間的換算關(guān)系：

1倍：1pt=1dp=1px（iPhone 3GS）
2倍：1pt=1dp=2px（iPhone 4s/5/6）
3倍：1pt=1dp=3px（iPhone 6 plus）

對(duì)于開(kāi)發(fā)者，實(shí)際應(yīng)用中應(yīng)該根據(jù)屏幕尺寸和 設(shè)備像素比（devicePixelRatio）來(lái)反推 CSS pixel。

也就是說(shuō)：假設(shè)設(shè)備像素比為 2，設(shè)計(jì)圖要做成了 720x1280 的，那么 CSS 里所有尺寸都除以 2 即可。

而對(duì)于圖片，比如一張實(shí)際大小 100x100px 的圖片，并且 width 和 height 都設(shè)了 100px（注意這里的 px 是 css pixel），實(shí)際占用了屏幕的像素?cái)?shù)就是（假設(shè)設(shè)備像素比是 3）300x300px（注意這里的 px 是真實(shí)的屏幕像素），也就是說(shuō)，變模糊了。所以，如果希望網(wǎng)頁(yè)的元素在高 PPI 設(shè)備上顯示不模糊（比如 1080x1920 屏幕的手機(jī)），位圖應(yīng)該做 3 倍的尺寸（比如做 300x300px 的圖，然后在 CSS 中設(shè) width 和 height 為 100px），svg（矢量圖）就無(wú)所謂了。

注意這里的 px 是指邏輯像素，即 CSS 文件中的 width、height。
max-width 和 max-device-width 都可以使用。

@media all and (max-device-width: 320px) {}

別以為當(dāng)我們?yōu)榱诉m配手機(jī)端的問(wèn)題，而特意根據(jù)屏幕尺寸和 devicePixelRatio 來(lái)反推 CSS pixel，就可以在手機(jī)端上優(yōu)雅地顯示網(wǎng)頁(yè)了，手機(jī)瀏覽器又涉及到有關(guān) viewport 的概念。這里介紹一下 layout viewport 和 visual viewport。

Layout viewport - 渲染視圖，渲染頁(yè)面所需要的尺寸

Visual viewport - 視覺(jué)視圖，瀏覽器可視區(qū)域尺寸

移動(dòng)設(shè)備上的瀏覽器認(rèn)為自己必須能讓所有的網(wǎng)站都正常顯示，即使是那些不是為移動(dòng)設(shè)備設(shè)計(jì)的網(wǎng)站。但如果以瀏覽器的可視區(qū)域作為 viewport 的話，因?yàn)橐苿?dòng)設(shè)備的屏幕都不是很寬，所以那些為桌面瀏覽器設(shè)計(jì)的網(wǎng)站放到移動(dòng)設(shè)備上顯示時(shí)，必然會(huì)因?yàn)橐苿?dòng)設(shè)備的 viewport 太窄，而擠作一團(tuán)，甚至布局什么的都會(huì)亂掉。所以這些瀏覽器就決定默認(rèn)情況下把 viewport 設(shè)為一個(gè)較寬的值，比如 980px，這樣的話即使是那些為桌面設(shè)計(jì)的網(wǎng)站也能在移動(dòng)瀏覽器上正常顯示了。ppk 把這個(gè)瀏覽器默認(rèn)的 viewport 叫做 layout viewport。

layout viewport 的寬度是大于瀏覽器可視區(qū)域的寬度的，所以我們還需要一個(gè) viewport 來(lái)代表瀏覽器可視區(qū)域的大小，ppk 把這個(gè) viewport 叫做 visual viewport。

圖一：布局?jǐn)D在小小的屏幕中； 圖二：Layout viewport 和 Visual viewport

拿 iPhone 舉例。
iPhone 創(chuàng)建出了一個(gè) 980px 的虛擬窗口——布局窗口（layout viewport）來(lái)對(duì)頁(yè)面布局，這時(shí)傳統(tǒng)的桌面端網(wǎng)頁(yè)終于能正常布局了（雖然要放大才能看清），但正是這個(gè) layout viewport 導(dǎo)致專門(mén)根據(jù)屏幕尺寸和 devicePixelRatio 優(yōu)化過(guò)的頁(yè)面也只能以縮放的方式顯示（可以想象在你的 PC 瀏覽器寬 980px 窗口里打開(kāi)一個(gè) 320px 的頁(yè)面的情景...），那么為了讓為移動(dòng)設(shè)備優(yōu)化過(guò)的網(wǎng)頁(yè)正常顯示，就要改變這個(gè) layout viewport。

布局窗口定義為：寬度為設(shè)備寬度，初始縮放比例為 1 倍，禁止用戶縮放。

ppk: A pixel is not a pixel is not a pixel

W3cplus 譯：此像素非彼像素

JeremyWei 譯：不是像素的像素不是像素

移動(dòng)前端開(kāi)發(fā)之viewport的深入理解

移動(dòng)端尺寸基礎(chǔ)知識(shí)

張?chǎng)涡瘢涸O(shè)備像素比devicePixelRatio簡(jiǎn)單介紹

SCREENSIZ.ES