裝置畫素和css畫素簡單介紹

本章節簡單介紹一下裝置畫素和css畫素之間的區別。

其實非常的簡單，下面就從一個大家比較常見的操作來做一下說明。

比如一個顯示器解析度是1024x768，也就是說在水平方向，每一行由1027個畫素點組成，在垂直方向由768個畫素點組成。

在預設狀態下，css畫素和裝置畫素是完全重合的。

當按住ctrl鍵，然後再滾動滑鼠中鍵的時候，會實現頁面的縮小和放大效果，這個縮小放大並不是改變元素的本身的畫素數。

比如一個元素寬度是100px，當放大到200%的時候，元素的width依然是100px，並沒有因此變成200px，但是它的實際畫素放大了兩倍，也就是說外觀上它的確是佔據200px的寬度，這個時候就是一個css畫素佔據兩個裝置畫素的空間。

圖示如下:

預設狀態下，四個元素沒有縮放效果，這個時候css畫素和裝置畫素是重合的。

當縮小元素的時候，可以說一個裝置畫素覆蓋多個css畫素。

當放大元素的時候，可以說一個css畫素覆蓋了多個裝置畫素。