日常開發(fā)中，px一定是大家接觸過最多的css單位，但是你真的了解px嘛？1px在屏幕中到底是多大呢？另外不知道大家有沒有過下面這些疑惑:

• 為什么一個(gè)元素在pc上和移動(dòng)端的物理尺寸不一樣，但是兩者的視覺效果上卻差不多呢？改變屏幕的分辨率時(shí)，屏幕上顯示的內(nèi)容大小為什么會(huì)跟著改變？縮放瀏覽器時(shí)，瀏覽器中的內(nèi)容的大小為什么會(huì)跟著改變？

想回答以上問題，我們就要知道css中的px到底指的是什么？

什么是css px?

在回答什么是css px之前，我們先要了解兩個(gè)概念——設(shè)備像素和參考像素。

設(shè)備像素(device pixel)

來看這張顯示器屏幕的放大圖。

從圖中可以看到，顯示器屏幕實(shí)際上是由一個(gè)一個(gè)"點(diǎn)"組成的（每個(gè)"點(diǎn)"又包含3個(gè)單位，也稱三元素組)，這些"點(diǎn)"就是設(shè)備像素。

需要注意的是,device pixel實(shí)際是可以"變化"的，當(dāng)你降低設(shè)備分辨率時(shí)，一個(gè)"點(diǎn)"就需要更多的三元素組來組成，此時(shí)"點(diǎn)"的物理尺寸就增大了。以下是維基百科關(guān)于這點(diǎn)的說明，想了解更多，請(qǐng)點(diǎn)擊這里查看。

因?yàn)槎鄶?shù)計(jì)算機(jī)顯示屏的分辨率可以通過計(jì)算機(jī)的操作系統(tǒng)來調(diào)節(jié)，顯示屏像素的分辨率可能不是一個(gè)絕對(duì)的衡量標(biāo)準(zhǔn)。

現(xiàn)代液晶顯示屏按設(shè)計(jì)有一個(gè)原始分辨率，它代表像素和三元素組之間的完美匹配。

對(duì)于該顯示器，原始分辨率能夠產(chǎn)生最精細(xì)的視頻。但是因?yàn)橛脩艨梢哉{(diào)整分辨率，顯示器必須能夠顯示其它分辨率。非原始分辨率必須通過在液晶顯示屏上擬合重新取樣來實(shí)現(xiàn)，要使用插值算法。這經(jīng)常會(huì)使顯示屏看起來破碎或模糊。例如，原始分辨率為1280×1024的顯示器在分辨率為1280×1024時(shí)看起來最好，也可以通過用幾個(gè)物理三元素組來表示一個(gè)像素以顯示800×600，但可能無法完全顯示1600×1200的分辨率，因?yàn)槲锢砣亟M不夠。

由于不同的設(shè)備屏幕分辨率和尺寸可能不一樣，所以設(shè)備上物理像素的大小也就不一樣。但是對(duì)于css來說，它希望在所有的設(shè)備上元素的顯示效果看起來都是差不多的。

那怎么才能讓同一元素在不同的設(shè)備上顯示的效果差不多呢？w3c提出了一個(gè)概念，也就是下面將要介紹的參考像素(reference pixel)。

參考像素(reference pixel)

從上面這幅圖可以看到，近處的鐵軌看起來很大，而遠(yuǎn)處的鐵軌看起來很小。這是由于我們眼睛的視角所產(chǎn)生"近大遠(yuǎn)小"的透視現(xiàn)象所造成的。

那設(shè)想一下，如果遠(yuǎn)處的鐵軌比近處的鐵軌尺寸大一些，是不是我們看遠(yuǎn)處的鐵軌就和看近處的差不多大了呢。

css參考像素(reference pixel)就是應(yīng)用了這個(gè)原理，w3c是這樣定義參考像素的

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees.

注意了，css參考像素它是一個(gè)visual angle，即一個(gè)約等于0.0213度的角。當(dāng)設(shè)備的典型觀看距離越遠(yuǎn)時(shí)，參考像素就越大（注意這里的大，不是指視角變大，而是角度對(duì)應(yīng)在屏幕上的尺寸變大）。

在介紹完設(shè)備像素和參考像素之后，下面該輪到今天的主角——css像素出場了。

css像素(css pixel)

顧名思義，css pixel是css樣式表語言中用來表示長度的一個(gè)單位，類似的單位還有pt,in,cm等。像pt,in,cm等都是物理單位，相對(duì)好理解，而px則有點(diǎn)抽象。

一個(gè)px到底是多大? 它又和pt,in,cm的長度等有什么聯(lián)系呢？這些都是亟待我們思考的問題。

在思考這些問題之前，先看下面這段w3c規(guī)范

For a CSS device, these dimensions（指in,pt,px等length單位） are either anchored by relating the physical units to their physical measurements, or by relating the pixel unit to the reference pixel. For print media and similar high-resolution devices, the anchor unit should be one of the standard physical units (inches, centimeters, etc). For lower-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit.For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.

對(duì)于css length單位（當(dāng)然也包括px）來說，不同的分辨率設(shè)備對(duì)它們的影響是不同的。

對(duì)高分辨率顯示設(shè)備（如打印機(jī)），length的anchor unit(可以理解為基準(zhǔn)單位)推薦使用基于物理測量的inches,centimeters等。而對(duì)于低分辨率的設(shè)備(如電腦顯示器)，anchor unit推薦使用pixel單位。下面具體來講講這兩者的區(qū)別：

高分辨率設(shè)備（high-resolution devices）

關(guān)于分辨率的東西這里不多講，不熟悉的同學(xué)可以點(diǎn)擊這里查看。我們之前說了，對(duì)于高分辨的顯示設(shè)備，基準(zhǔn)單位是基于物理測量的inches, centimeters。

基于物理測量是什么意思呢？就是它實(shí)際的物理長度。如單位cm， 用css設(shè)置一個(gè)盒子的寬度為1cm,那它就等于物理上的1cm，你用尺子去量，它就是1cm。

那現(xiàn)在問題來了，px呢？px怎么去基于物理測量呢？

這個(gè)問題我們結(jié)合w3c和mdn，就能得到解答:

Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels.

However, for printers and high-resolution screens, one CSS pixel implies multiple device pixels. 1px=1/96th of 1in.

現(xiàn)在知道了，在高分辨率設(shè)備下，1px就等于96分之一英寸，約等于0.2646mm。

低分辨率設(shè)備（low-resolution devices）

對(duì)于低分辨率設(shè)備來說，anchor unit是基于pixel unit的，那pixel unit又是什么呢？如果有仔細(xì)看過css像素那小節(jié)里引用w3c的那段說明的話，答案你應(yīng)該已經(jīng)知道了。為了說明方便，還是把那句最重要的話再寫一遍。

For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.

這句話非常重要！！！

可以說理解了這句話，你就基本上理解了什么是css像素。這里為了照顧部分英語不好的同學(xué)，我把這句話翻譯一遍

對(duì)于這樣的設(shè)備（這里指低分辨率設(shè)備），建議像素單位參考最接近參考像素的整數(shù)個(gè)設(shè)備像素。

我們舉個(gè)例子來說明一下，一個(gè)分辨率為1680 * 1050的22寸電腦顯示器。對(duì)于電腦顯示器來說，它的參考像素約為0.26mm(這個(gè)值的大小由設(shè)備的典型視距決定，出廠時(shí)已經(jīng)確定)。

確定了參考像素之后，再來計(jì)算設(shè)備像素。通過分辨率和尺寸，計(jì)算出該顯示器的ppi

為90.05，此時(shí)一個(gè)設(shè)備像素的值就等于0.28mm。

對(duì)比這兩個(gè)像素值之后發(fā)現(xiàn)，一個(gè)設(shè)備像素的值是最接近參考像素的。所以對(duì)于這個(gè)設(shè)備來說，一個(gè)像素單位(1px)就等于一個(gè)設(shè)備像素。

到這里，相信大家對(duì)css px是什么應(yīng)該有了一個(gè)基本的概念。下面我們通過分析文章開始時(shí)提出的幾個(gè)問題，來進(jìn)一步加深對(duì)css px的印象。

分析問題

（1）為什么一個(gè)元素在pc上和移動(dòng)端的物理尺寸不一樣，但是兩者的視覺效果上卻差不多呢？

因?yàn)閏ss px是基于參考像素確定的，而參考像素就是為了讓同一元素在不同設(shè)備上顯示效果盡量一致而設(shè)計(jì)的（對(duì)于移動(dòng)端和pc端來說，參考像素的物理大小肯定不一樣，但是顯示效果基本是一致的）。所以同一個(gè)元素，盡管在pc端和移動(dòng)端尺寸不一樣，但視覺效果卻是差不多的。

（2）當(dāng)改變屏幕的分辨率時(shí)，屏幕上顯示的內(nèi)容大小為什么會(huì)跟著改變？

我們舉一個(gè)例子來說明這個(gè)問題，還是以上面那個(gè)典型的22寸顯示器為例：

• 正常分辨率下，即1680 * 1050，此時(shí)的ppi是90.05，那一個(gè)device pixel的長度就約為0.28mm。這時(shí)一個(gè)device pixel就約等于一個(gè)參考像素對(duì)應(yīng)的大小。如果你用css定義了一個(gè)盒子寬為375px，此時(shí)你用尺子去屏幕上量，會(huì)發(fā)現(xiàn)375px盒子的實(shí)際寬度是0.28(mm) * 375 ≈ 10.5cm。調(diào)整顯示器的分辨率為1024 * 640時(shí)，此時(shí)一個(gè)device pixel對(duì)應(yīng)的長度是0.46mm，雖然它和參考像素對(duì)應(yīng)的大小有差距，但是沒辦法，你還得使用它，畢竟它現(xiàn)在就是最接近參考像素大小的device pixel了。上面那個(gè)375px的盒子，此時(shí)的實(shí)際寬度則為0.46 * 375 ≈ 17.4cm。所以降低分辨率之后，相同的內(nèi)容會(huì)顯得大了。調(diào)整顯示器的分辨率為1920 * 1080，此時(shí)一個(gè)device pixel對(duì)應(yīng)的長度是0.25mm，此時(shí)375px的盒子實(shí)際寬度是0.25 * 375 ≈ 9.3cm，所以提高分辨率后，內(nèi)容自然就變小了。

（3）當(dāng)你縮放瀏覽器大小時(shí)，瀏覽器中的內(nèi)容的大小會(huì)跟著改變？

這個(gè)現(xiàn)象，ppk在之前的一篇文章里提到過。縮放瀏覽器時(shí)，也就相當(dāng)于改變了瀏覽器的分辨率，所以這個(gè)問題和第2個(gè)一樣，這里也就不多贅述了。

總結(jié)

1.對(duì)于低分辨率設(shè)備（絕大部分顯示器，手機(jī)屏幕），1個(gè)css像素相當(dāng)于最接近參考像素的整數(shù)個(gè)設(shè)備像素。

2.對(duì)于高分辨率設(shè)備(打印機(jī))來說，1個(gè)css像素就是96分之一英寸。

3.參考像素(reference pixel)就是從一臂之遙看解析度為96DPI的設(shè)備時(shí)，1個(gè)設(shè)備像素的視角（但為了方便計(jì)算，都把這個(gè)視角轉(zhuǎn)換為其在顯示設(shè)備上對(duì)應(yīng)的大小）。

3.在低分辨率設(shè)備中，pt,cm,in等單位的大小不等于它的物理大小，它們的大小需要px（這時(shí)等于xx個(gè)設(shè)備像素）來進(jìn)行轉(zhuǎn)換，如1in此時(shí)等于96個(gè)設(shè)備像素的大小(即96px)。

4.在高分辨率設(shè)備中，1px也不等于xx個(gè)設(shè)備像素，px的大小就等于固定值。

5.設(shè)備像素(device pixel)不是固定不變的，除非你的設(shè)備不能調(diào)整分辨率。

參考文獻(xiàn)：

A tale of two viewports — part one

w3c css規(guī)范

CSS像素、物理像素、邏輯像素、設(shè)備像素比、PPI、Viewport

wiki pixel

wiki 液晶顯示器

移動(dòng)端高清、多屏適配方案

rethinking the pixel it‘s all relative now

A Pixel Identity Crisis

作者：淼淼真人

鏈接：http://www.imooc.com/article/details/id/75237

來源：慕課網(wǎng)