一、像素(pixel)

像素，通常來說就是一個個有各種顏色的小方點，作為構(gòu)成影像的最小單位。它即有硬件上的概念也有非硬件上的概念，比如，在css中，1px被稱為1個像素，此時這一個像素并不等同與硬件上的一個像素，它們存在一定的比例關(guān)系，這個比例的多少是由設(shè)備像素比決定的(如瀏覽器的window.devicePixelRatio)。另一個例子是我們的筆記本電腦，其分辨率規(guī)格為1920x1080，也就是說筆記本屏幕上寬有1920個硬件像素，高有1080個硬件像素，而當(dāng)我們打開瀏覽器并全屏?xí)r，window.screen.width和window.screen.heigth顯示結(jié)果不是1920、1080。還有，比如電腦中顯示某張圖片為140x140，那么指的也不是硬件像素，而是參照像素。

1.硬件像素/設(shè)備像素(dp)

硬件像素是顯示屏能夠顯示的最小的點，通常由紅、綠、藍三個子像素構(gòu)成，這三個子像素組成了一個有顏色的小方點。通常來說，電子產(chǎn)品的分辨率規(guī)格都是硬件像素。

2.非硬件像素

當(dāng)硬件像素這個概念已經(jīng)深入人心時，隨著時間的推移，電腦，手機最終都出現(xiàn)了各種各樣的分辨率，所有的設(shè)計如果再基于硬件像素，那么就會有非常大的局限性，同樣分辨率的圖片在不同分辨率的設(shè)備上顯示可能會存在較大差異。于是，參照像素出現(xiàn)了，它可能等于硬件像素的n倍，不同設(shè)備上這個n可能是不同的，換句話說就是以設(shè)備的尺寸作為標準來定義參照像素的。這樣一來，基于參照像素的設(shè)計在不同尺寸或者不同分辨率的設(shè)備屏幕上看起來是一樣。css中的像素單位就是參照像素中的一種

3.像素密度(ppi)

像素密度表示每英寸所擁有的像素(pixel)數(shù)目，數(shù)值越高代表屏幕能以更高的密度顯示圖像，即圖像越精細。

ppi計算公式.png

當(dāng)我們在設(shè)計手機的圖片素材時，會遇到同一張圖片在不同尺寸或分辨率的手機上顯示大小是不同的。這是因為同一張圖片是固定的物理像素，而不同的設(shè)備長和寬上物理像素的數(shù)目不同，從而導(dǎo)致同張圖片，在手機端的長寬上占用的比例不同

不同ppi的手機圖標顯示(顯示的是硬件像素).png

從顯示情況來看，顯然是十分奇怪的，同樣尺寸的手機，顯示的圖標大小竟然不同。一般的解決方案是，dpr大(后面會提到)的設(shè)備下對圖片進行放大處理，讓圖片的一個像素覆蓋多個物理像素。但是這樣的辦法不可取，圖片上(jpg,png,gif)的一個最小單位成為位圖像素，是不可再分割的。若想一個位圖像素覆蓋多個物理像素，那么就得就近取色進行填充，勢必會產(chǎn)生模糊。所以很有必要準備多個分辨率的圖片，對于ppi較小的手機使用分辨率更小的圖標。

4.設(shè)備獨立像素(dips:device-independent pixels)

設(shè)備獨立像素實際上也就是非硬件像素的一種，是由操作系統(tǒng)控制的一個虛擬的像素。如在web中開發(fā)中的css像素，無論是PC端還是安卓端的，在瀏覽器中的得到的screen.width/height都是設(shè)備獨立像素。設(shè)備獨立像素與硬件像素(設(shè)備像素)存在一定比例關(guān)系，這個比例關(guān)系就是上文提到的設(shè)備像素比(devicePixelRatio)。它們的關(guān)系可以用公式表示為：

設(shè)備像素比計算.png

5.如何確定設(shè)備像素比(dpr)

當(dāng)確定了設(shè)備像素比，就確定了設(shè)備獨立像素。在pc端中操作系統(tǒng)和瀏覽器都能夠改變設(shè)備像素比，只不過操作系統(tǒng)改變設(shè)備像素比后應(yīng)用于全局，瀏覽器改變設(shè)備像素比應(yīng)用于瀏覽器，無論PC端和手機端都會有一個默認的合理的設(shè)備像素比的大小，一般情況下用戶不會做更改的。

1.PC端的設(shè)備像素比

window系統(tǒng)都可以通過改變屏幕分辨率改變設(shè)備像素比

win10改變設(shè)備像素比.png

在Chrome控制臺中，查看到電腦當(dāng)前的設(shè)備像素比是1.25，即在某個方向上1.25個設(shè)備像素用1個css像素來表示

默認設(shè)備像素比.png

如果此時進行頁面放大為125%，設(shè)備像素比就變?yōu)?.56，此時某個方向上1.56個設(shè)備像素用1個css像素來表示

頁面放大時的設(shè)備像素比.png

將頁面縮小為80%時，設(shè)備像素比就變?yōu)?.0，此時某個方向上1個設(shè)備像素用1個css像素來表示

頁面縮小時的設(shè)備像素比.png

2.手機端的設(shè)備像素比

iphone5的設(shè)備獨立像素為320x568，設(shè)備像素為640x1136

iphone5的設(shè)備像素比.png

Galaxy S5的設(shè)備獨立像素為360x640，設(shè)備像素為1080x1920

Galaxy S5.png

從上面兩個設(shè)備來看，即便分辨率相差較大，但是因為設(shè)備獨立像素的合理設(shè)置，渲染的內(nèi)容比例確是差不多的，也就是說1個css像素寬度占這兩個手機寬度的比例是差不多的。
各個手機的設(shè)備像素比參照

6.三個視口(非硬件像素)

1.布局視口(documnent.documentElement.clientWidth/clientHeight)

PC端的布局視口一般與瀏覽器可見窗口寬度一致，而手機端中布局視口卻不是一致的，其布局視口遠遠大于其設(shè)備獨立像素，并有可能還比設(shè)備像素大，一般在768px~1024px，這是因為PC端瀏覽器的頁面設(shè)計寬度一般都很大，為了在手機端也能較好的顯示，就將手機端的布局視口設(shè)計的較大，手機端可以通過放大縮小來觀看網(wǎng)站的全貌。但是布局視口的大小并不是理想的手機視口大小，當(dāng)網(wǎng)站是專門為手機設(shè)計時，手機應(yīng)該用回屬于自己的理想視口。
PC端瀏覽器放大時，css像素視覺上會變大，但是其數(shù)值卻不變，所以布局視口變小，同理瀏覽器縮小時，布局視口變大；
手機端卻不一樣，瀏覽器的放大縮小都不會改變布局視口的寬度。

2.理想視口(window.screen.height/width)

PC端與手機端的理想視口是固定的，無論怎么縮放大小都不會發(fā)生變化，與設(shè)備的屏幕寬度相一致。說白了就是設(shè)備獨立像素。下方的代碼能夠?qū)⑹謾C端的布局視口設(shè)置為理想視口，當(dāng)我們專門為手機端設(shè)計頁面布局時，都會用到。
<meta name="viewport" content="width=device-width，initial-scale">
每一個名/值對都是一個給瀏覽器發(fā)號命令的指令。它們被逗號分隔，共有6個
1、width:設(shè)置布局視口的寬度為特定的值
2、initial-scale:設(shè)置頁面的初始縮放程度和布局視口的寬度
3、minimum-scale:設(shè)置了最小縮放程度(用戶可縮小的程度)
4、maximum-scale:設(shè)置了最大縮放程度(用戶可放大的程度)
5、user-scalable:是否阻止用戶進行縮放
6、height:設(shè)置布局視口的高度(未被實現(xiàn))

3.視覺視口(window.innerHeight/innerWidth)

等價于用戶看到的區(qū)域內(nèi)的css像素的數(shù)量。PC端的視覺視口一般等于布局視口，瀏覽器縮放時，無論是手機還是PC端，大小都會發(fā)生變化。瀏覽器縮小時，用戶看到的css像素多了，就是變大，反之則變小。

7.css的長度px、em、rem、%

  px：絕對單位，css的最小單位
  em: 相對單位，繼承父節(jié)點字體的大小，相當(dāng)于“倍”，如果自身定義了font-size按自身來計算，整個頁面內(nèi)1em不是一個固定的值
 rem: 相對單位，繼承根節(jié)點html字體大小，相當(dāng)于“倍”，相當(dāng)于“倍”，css3屬性，整個頁面1rem是一個固定的值
   %: 相對單位，不同與vw和vh(后文說)，相對與什么就具體情況而定，較復(fù)雜，若對于block的高度、寬度，一般相對于父元素

8.適配眾多分辨率的電腦或手機

方案1：響應(yīng)式設(shè)計

響應(yīng)式設(shè)計就是PC和手機端公用一套dom結(jié)構(gòu)，通過@media為主要手段，對不同分辨率(設(shè)備獨立像素)的設(shè)備使用不同的css樣式。

方案2：rem自適應(yīng)設(shè)計

不使用@media，且以比例布局為主。只要確定了某臺設(shè)備的頁面布局，以這臺設(shè)備作為標準，其他不同分辨率、不同大小但是同比例的設(shè)備以此設(shè)備的大小做縮放。如阿里團隊開源的一個庫：flexible.js。原理是通過js控制html的根字體的大小，在dom元素的寬高單位(除文本用px)都使用rem，并動態(tài)地改變設(shè)備像素比和字體大小來實現(xiàn)不同設(shè)備的統(tǒng)一。

下面是rem自適應(yīng)的一個例子
比如我們的設(shè)計稿寬是640px(css)，以寬度為640px的設(shè)備為基準，其html字體大小為64px，1rem=64px，此時在該設(shè)備設(shè)計一塊大小為160px的div，160px=2.5rem。所以通過改變html字體的大小，讓其他設(shè)備同樣使用2.5rem

方案3：vw自適應(yīng)方案

vw、vh是基于Viewport視窗的長度單位，分別是Viewport寬和高，而Viewport是指瀏覽器的可視區(qū)域，即視覺視口(window.innerHeight/innerWidth)。有如下公式：
1vw = window.innerWidth * 1%
1vh = window.innerHeigth * 1%
所以根據(jù)vw就可以對不同分辨率、dpr等不同的終端設(shè)備，就能夠以原生css的方式使用vw、vh來實現(xiàn)flexible的自適應(yīng)設(shè)計。

vw、vh、vmin和vmax.png

參考文章：

• DPI、PPI、DP、PX 的詳細計算方法及算法來源是什么？
• CSS布局基礎(chǔ)之一設(shè)備像素，設(shè)備獨立像素，設(shè)備像素比，css像素之間的關(guān)系
• 設(shè)備像素，設(shè)備獨立像素，CSS像素
• 移動web開發(fā)之視口
• 再聊移動端頁面的適配
• 使用Flexible實現(xiàn)手淘H5頁面的終端適配
• rem自適應(yīng)布局