你真的了解像素嗎

發(fā)布時間：2017年04月12日作者：文章轉(zhuǎn)自網(wǎng)絡(luò)，版權(quán)歸原作者所有，反饋可立刻刪除 (該文來自筆記，點擊查看原文)

css中的相對單位與絕對相位

傳統(tǒng)pc端網(wǎng)頁設(shè)計中，設(shè)計師給出的視覺元素大小的衡量單位通常是以css中的px為單位的。我們也從來不去關(guān)心一px到底有多長，只要按照設(shè)計師給出的px大小編寫css代碼即可。所以很多前端開發(fā)認(rèn)為px是絕對單位，甚至很多css書籍中也簡單的告訴我們px是絕對em、ex、單位百分比是相對單位。

而實際上除了pt之外其他都是相對單位，關(guān)于pt這個單位我除了在《css權(quán)威指南》種有見過外，其他css書籍從未提到。pt在css單位中屬于真正的絕對對單位，1pt = 1/72(inch),inch及英寸，而1英寸等于2.54厘米。

那么px到底是什么？

px實際是pixel（像素）的縮寫，根據(jù) 維基百科的解釋，它是圖像顯示的基本單元，既不是一個確定的物理量，也不是一個點或者小方塊，而是一個抽象概念。所以在談?wù)撓袼貢r一定要清楚它的上下文！一定要清楚它的上下文！一定要清楚它的上下文！

不同的設(shè)備，圖像基本采樣單元是不同的，顯示器上的物理像素等于顯示器的點距，而打印機的物理像素等于打印機的墨點。而衡量點距大小和打印機墨點大小的單位分別稱為ppi和dpi：

ppi：每英寸多少像素數(shù)，放到顯示器上說的是每英寸多少物理像素及顯示器設(shè)備的點距。

dpi：每英寸多少點。

關(guān)于打印機的點距我們不去關(guān)心，只要知道 當(dāng)用于描述顯示器設(shè)備時ppi與dpi是同一個概念 。

CSS像素的真正含義

由于不同的物理設(shè)備的物理像素的大小是不一樣的，所以css認(rèn)為瀏覽器應(yīng)該對css中的像素進(jìn)行調(diào)節(jié)，使得瀏覽器中 1css像素的大小在不同物理設(shè)備上看上去大小總是差不多 ，目的是為了保證閱讀體驗一致。為了達(dá)到這一點瀏覽器可以直接按照設(shè)備的物理像素大小進(jìn)行換算，而css規(guī)范中使用"參考像素"來進(jìn)行換算。

1參考像素即為從一臂之遙看解析度為96DPI的設(shè)備輸出（即1英寸96點）時，1點（即1/96英寸）的視角。它并不是1/96英寸長度，而是從一臂之遙的距離處看解析度為96dpi的設(shè)備輸出一單位（即1/96英寸）時視線與水平線的夾角。通常認(rèn)為常人臂長為28英寸，所以它的視角是(1/96)in / (28in * 2 * PI / 360deg) = 0.0213度。

由于css像素是一個視角單位，所以在真正實現(xiàn)時，為了方便基本都是根據(jù)設(shè)備像素?fù)Q算的。瀏覽器根據(jù)硬件設(shè)備能夠直接獲取css像素

設(shè)計師的設(shè)計稿

CSS網(wǎng)頁開發(fā)的目的就是還原設(shè)計師的設(shè)計稿，pc時代的前端開發(fā)者不需要去了解CSS像素的來龍去脈，只需要按照設(shè)計師的標(biāo)注用css還原即可，而且設(shè)計稿的長度單位跟設(shè)備的顯示單位一致。

然而隨著移動時代的發(fā)展，不同尺寸不同設(shè)備分辨率，相同尺寸下不同分辨率。為了在各式各樣的手機屏幕上有一致的視覺，甚至是同一份設(shè)計稿要同時在native和移動web上使用，設(shè)計稿需要定一個設(shè)計標(biāo)準(zhǔn)，即設(shè)計稿的大小和視覺元素的長度單位，然后在各個設(shè)備上做適配。

dpi、ppi、dip、分辨率、屏幕尺寸、設(shè)備像素、css像素、設(shè)備像素比

分類導(dǎo)航

你真的了解像素嗎

延伸閱讀

我想了解如何學(xué)習(xí)