裝置畫素、獨立畫素和css畫素

畫素是web開發中最為常用的單位之一，看如下程式碼例項：

[CSS] 純文字檢視 複製程式碼
div {
  width:200px;
  height:100px;
}

程式碼設定div元素寬度和高度分別為200px和100px；這是最為簡單的操作，但是如果深入考慮，可能未必對畫素有清晰的瞭解，比如1px到底表示多少尺寸，尺寸是否固定不變。

一.畫素：

畫素分為三種：

（1）.裝置畫素。

（2）.裝置獨立畫素。

（3）.CSS畫素。

二.裝置畫素：

裝置畫素也被稱作為物理畫素，它表示顯示裝置的真實畫素，此畫素是裝置的固有屬性，也就是說，從出廠的那一刻，裝置畫素已經固定，不會再發生改變。

（1）.解析度：

通常使用解析度來描述裝置畫素，例如1920*1080，表示裝置橫向有1920畫素點，縱向有1080個畫素點。

（2）.螢幕尺寸：

購買電視或者手機等裝置的顯示器都有一個螢幕尺寸引數，比如55英寸，它既不是顯示器的寬度也不是高度，而是對角線的長度，圖示如下：

（3）.螢幕畫素密度：

螢幕畫素密度（Pibel Per Inch）簡稱 ppi ，單位是 dpi（dot per inch）。

理論上，ppi越高越好，影像會更加細膩清晰，計算方式如下：

勾股定理算出對角線的解析度：

對角線解析度除以螢幕尺寸：2203/5≈440dpi。

三.裝置獨立畫素：

隨著技術的進步，很小的螢幕能容納很高的物理畫素，比如1920*1080以前只能應用於大的顯示器，現在可能被容納於一個小的移動端裝置中。如果我們直接使用物理畫素，看如下程式碼：

[CSS] 純文字檢視 複製程式碼
div {
  width:200px;
  height:100px;
}

iPhone 3和iPhone 4，螢幕尺寸一樣，後者的畫素密度是前者的兩倍，如果使用物理畫素作為單位，那麼div的寬度視覺上iPhone 4是iPhone 3的一半，所以使用物理畫素在web中設定尺寸是不合理的。因此作業系統定義裝置獨立畫素，用裝置獨立畫素定義的尺寸，不管螢幕的引數如何，都能以合適的大小顯示。iPhone 3物理畫素是320*480，iPhone 4的物理畫素是640*960，但是它們的裝置獨立畫素都是320*480，iPhone 4用4個物理畫素表示1個裝置獨立畫素（橫向2個物理畫素表示1個裝置獨立畫素，縱向2個物理畫素表示一個裝置獨立畫素），這一切都是由作業系統控制。

裝置獨立畫素可以由如下程式碼獲取：

[JavaScript] 純文字檢視 複製程式碼
screen.width //寬度
screen.height //高度

四.CSS畫素：

在web中我們所設定的畫素都是CSS畫素，例如：

[CSS] 純文字檢視 複製程式碼
div {
  width:200px;
  height:100px;
}

在沒有縮放的情況下，1個css畫素等同於一個裝置獨立畫素。

CSS畫素在視覺上是很容易改變大小的，比如縮放瀏覽器頁面，就是改變的CSS畫素，當放大一倍，那麼一個CSS畫素在橫向或者縱向上會覆蓋兩個裝置獨立畫素。例如寬度100px畫素，當頁面放大一倍，它會在橫向上由原本佔據100個裝置獨立畫素，變成佔據200個裝置獨立畫素；如果縮小，則恰好相反，只能佔據50個裝置獨立畫素。

圖示如下：

圖示說明：

（1）.裝置畫素(深藍色背景)、CSS畫素(半透明背景)。

（2）.左圖表示當使用者進行縮小操作時，一個裝置畫素覆蓋了多個CSS畫素。

（3）.右圖表示當使用者進行放大操作時，一個CSS畫素覆蓋了多個裝置畫素。

無論CSS畫素是縮小還是放大，它是畫素數目是不變的，比如100px，無論縮放，它依然是100px，只不過它佔據的裝置獨立畫素髮生了變化（體積發生了變化，視覺大小上發生了變化而已）。

特別說明：裝置獨立畫素也是可以設定的，但是沒人閒著沒事去設定它，所以在沒有縮放的情況下，裝置獨立畫素可以等同於CSS畫素。