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

admin發表於2017-02-17
原文網址 : http://www.softwhy.com/article-1235-1.html
CSS
本章節簡單介紹一下裝置畫素和css畫素之間的區別。

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

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

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

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

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

圖示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/17/160856ccmicbks0jwibemo.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

a:3:{s:3:\"pic\";s:43:\"portal/201702/17/160954rtprr6ss5ap5s7ba.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

a:3:{s:3:\"pic\";s:43:\"portal/201702/17/161022doo0w55s11msot1c.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

相關文章