定義
像素,又稱畫素,是圖像顯示的基本機關,譯自英文“pixel”,pix是英語單詞picture的常用簡寫,加上英語單詞“元素”element,就得到pixel,故“像素”表示“圖像元素”之意,有時亦被稱為pel(picture element)
像素是網頁布局的基礎。一個像素就是計算機能夠顯示一種特定顔色的最小區域。當裝置尺寸相同但像素變得更密集時,螢幕能顯示的畫面的過渡更細緻,網站看起來更明快。
//ppi是指螢幕上每英寸可以顯示的像素點的數量,即螢幕像素密度
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiInBnauQTN5kTM2gTM40iM1gDOxMjM5ATNxUDM2EDMy0SOzgDM0czLcVDM2EDMy8CX5MDOwQzNvw1ZvxmYvwVbvNmLzd2bsJmbj5SNxAjMzhGdhB3YpB3X39Fcvw1LcpDc0RHaiojIsJye.jpg)
分類
實際上像素分為兩種:裝置像素和CSS像素
1、裝置像素(device independent pixels): 裝置螢幕的實體像素,任何裝置的實體像素的數量都是固定的
2、CSS像素(CSS pixels): 又稱為邏輯像素,是為web開發者創造的,在CSS和javascript中使用的一個抽象的層
每一個CSS聲明和幾乎所有的javascript屬性都使用CSS像素,是以實際上從來用不上裝置像素 ,唯一的例外是screen.width/height
//我們通過CSS和javascript代碼設定的像素都是邏輯像素
width:300px;
font-size:16px;
縮放
在桌面端,css的1個像素往往都是對應着電腦螢幕的1個實體像素。
//一個CSS像素完全覆寫了一個裝置像素
而在手機端,由于螢幕尺寸的限制,縮放是經常性的操作。
//裝置像素(深藍色背景)、CSS像素(半透明背景)
//左圖表示當使用者進行縮小操作時,一個裝置像素覆寫了多個CSS像素
//右圖表示當使用者進行放大操作時,一個CSS像素覆寫了多個裝置像素
| |
不論我們進行縮小或放大操作,元素設定的CSS像素(如width:300px)是始終不變的,而一個CSS像素對應多少個裝置像素是根據目前的縮放比例來決定的
DPR
裝置像素比DPR(devicePixelRatio)是預設縮放為100%的情況下,裝置像素和CSS像素的比值
DPR = 裝置像素 / CSS像素(某一方向上)
在早先的移動裝置中,并沒有DPR的概念。随着技術的發展,移動裝置的螢幕像素密度越來越高。從iphone4開始,蘋果公司推出了所謂的retina視網膜螢幕。之是以叫做視網膜螢幕,是因為螢幕的PPI(螢幕像素密度)太高,人的視網膜無法分辨出螢幕上的像素點。iphone4的分辨率提高了一倍,但螢幕尺寸卻沒有變化,這意味着同樣大小的螢幕上,像素多了一倍,于是DPR = 2
實際上,此時的CSS像素對應着以後要提到的理想視口,其對應的javascript屬性是screen.width/screen.height
而對于裝置像素比DPR也有對應的javascript屬性window.devicePixelRatio
640(px) / 320(px) = 2
1136(px) / 568(px) = 2
640(px)*1136(px) / 320(px)*568(px) = 4