你真的瞭解css像素嘛？

時間 2019-11-21

標籤瞭解 css 像素欄目 CSS 简体版

原文原文鏈接

在平常開發中，px必定是你們接觸過最多的css單位，可是你真的瞭解px嘛？1px在屏幕中究竟是多大呢？另外不知道你們有沒有過下面這些疑惑:css

爲何一個元素在pc上和移動端的物理尺寸不同，可是二者的視覺效果上卻差很少呢？
改變屏幕的分辨率時，屏幕上顯示的內容大小爲何會跟着改變？
縮放瀏覽器時，瀏覽器中的內容的大小爲何會跟着改變？

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

什麼是css px?

在回答什麼是css px以前，咱們先要了解兩個概念——設備像素和參考像素。git

設備像素(device pixel)

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

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

須要注意的是,device pixel實際是能夠"變化"的，當你下降設備分辨率時，一個"點"就須要更多的三元素組來組成，此時"點"的物理尺寸就增大了。如下是維基百科關於這點的說明，想了解更多，請點擊這裏查看。瀏覽器

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

因爲不一樣的設備屏幕分辨率和尺寸可能不同，因此設備上物理像素的大小也就不同。可是對於css來講，它但願在全部的設備上元素的顯示效果看起來都是差很少的。ide

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

參考像素(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個同樣，這裏也就很少贅述了。