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

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

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

什么是css px?

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

設備像素(device pixel)

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

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

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

因為多數計算機顯示屏的分辨率可以通過計算機的操作系統來調節，顯示屏像素的分辨率可能不是一個絕對的衡量標準。
現代液晶顯示屏按設計有一個原始分辨率，它代表像素和三元素組之間的完美匹配。
對于該顯示器，原始分辨率能夠產生最精細的視頻。但是因為用戶可以調整分辨率，顯示器必須能夠顯示其它分辨率。非原始分辨率必須通過在液晶顯示屏上擬合重新取樣來實現，要使用插值算法。這經常會使顯示屏看起來破碎或模糊。例如，原始分辨率為1280×1024的顯示器在分辨率為1280×1024時看起來最好，也可以通過用幾個物理三元素組來表示一個像素以顯示800×600，但可能無法完全顯示1600×1200的分辨率，因為物理三元素組不夠。

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

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

參考像素(reference pixel)

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

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

css參考像素(reference pixel)就是應用了這個原理，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參考像素它是一個visual angle，即一個約等于0.0213度的角。當設備的典型觀看距離越遠時，參考像素就越大（注意這里的大，不是指視角變大，而是角度對應在屏幕上的尺寸變大）。

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

css像素(css pixel)

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

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

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

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.

對于css length單位（當然也包括px）來說，不同的分辨率設備對它們的影響是不同的。

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

高分辨率設備（high-resolution devices）

關于分辨率的東西這里不多講，不熟悉的同學可以點擊這里查看。我們之前說了，對于高分辨的顯示設備，基準單位是基于物理測量的inches, centimeters。

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

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

這個問題我們結合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.

現在知道了，在高分辨率設備下，1px就等于96分之一英寸，約等于0.2646mm。

低分辨率設備（low-resolution devices）

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

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像素。這里為了照顧部分英語不好的同學，我把這句話翻譯一遍

對于這樣的設備（這里指低分辨率設備），建議像素單位參考最接近參考像素的整數個設備像素。

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

確定了參考像素之后，再來計算設備像素。通過分辨率和尺寸，計算出該顯示器的ppi 為90.05，此時一個設備像素的值就等于0.28mm。

對比這兩個像素值之后發現，一個設備像素的值是最接近參考像素的。所以對于這個設備來說，一個像素單位(1px)就等于一個設備像素。

到這里，相信大家對css px是什么應該有了一個基本的概念。下面我們通過分析文章開始時提出的幾個問題，來進一步加深對css px的印象。

分析問題

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

因為css px是基于參考像素確定的，而參考像素就是為了讓同一元素在不同設備上顯示效果盡量一致而設計的（對于移動端和pc端來說，參考像素的物理大小肯定不一樣，但是顯示效果基本是一致的）。所以同一個元素，盡管在pc端和移動端尺寸不一樣，但視覺效果卻是差不多的。

（2）當改變屏幕的分辨率時，屏幕上顯示的內容大小為什么會跟著改變？

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

• 正常分辨率下，即1680 * 1050，此時的ppi是90.05，那一個device pixel的長度就約為0.28mm。這時一個device pixel就約等于一個參考像素對應的大小。如果你用css定義了一個盒子寬為375px，此時你用尺子去屏幕上量，會發現375px盒子的實際寬度是0.28(mm) * 375 ≈ 10.5cm。

• 調整顯示器的分辨率為1024 * 640時，此時一個device pixel對應的長度是0.46mm，雖然它和參考像素對應的大小有差距，但是沒辦法，你還得使用它，畢竟它現在就是最接近參考像素大小的device pixel了。上面那個375px的盒子，此時的實際寬度則為0.46 * 375 ≈ 17.4cm。所以降低分辨率之后，相同的內容會顯得大了。

• 調整顯示器的分辨率為1920 * 1080，此時一個device pixel對應的長度是0.25mm，此時375px的盒子實際寬度是0.25 * 375 ≈ 9.3cm，所以提高分辨率后，內容自然就變小了。

（3）當你縮放瀏覽器大小時，瀏覽器中的內容的大小會跟著改變？

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

總結

1.對于低分辨率設備（絕大部分顯示器，手機屏幕），1個css像素相當于最接近參考像素的整數個設備像素。

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

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

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

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

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

參考文獻

A tale of two viewports — part one

w3c css規范

CSS像素、物理像素、邏輯像素、設備像素比、PPI、Viewport

wiki pixel

wiki 液晶顯示器

移動端高清、多屏適配方案

rethinking the pixel it‘s all relative now

A Pixel Identity Crisis

總結

以上是生活随笔為你收集整理的你真的了解css像素嘛？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。