一、像素(pixel)

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

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

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

2.非硬件像素

當(dāng)硬件像素這個(gè)概念已經(jīng)深入人心時(shí)诫舅，隨著時(shí)間的推移羽利，電腦，手機(jī)最終都出現(xiàn)了各種各樣的分辨率刊懈，所有的設(shè)計(jì)如果再基于硬件像素铐伴，那么就會(huì)有非常大的局限性贮勃，同樣分辨率的圖片在不同分辨率的設(shè)備上顯示可能會(huì)存在較大差異续扔。于是，參照像素出現(xiàn)了踱阿，它可能等于硬件像素的n倍泽疆，不同設(shè)備上這個(gè)n可能是不同的户矢，換句話說就是以設(shè)備的尺寸作為標(biāo)準(zhǔn)來定義參照像素的。這樣一來殉疼，基于參照像素的設(shè)計(jì)在不同尺寸或者不同分辨率的設(shè)備屏幕上看起來是一樣梯浪。css中的像素單位就是參照像素中的一種

3.像素密度(ppi)

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

ppi計(jì)算公式.png

當(dāng)我們?cè)谠O(shè)計(jì)手機(jī)的圖片素材時(shí)，會(huì)遇到同一張圖片在不同尺寸或分辨率的手機(jī)上顯示大小是不同的眠砾。這是因?yàn)橥粡垐D片是固定的物理像素虏劲，而不同的設(shè)備長(zhǎng)和寬上物理像素的數(shù)目不同，從而導(dǎo)致同張圖片褒颈，在手機(jī)端的長(zhǎng)寬上占用的比例不同

不同ppi的手機(jī)圖標(biāo)顯示(顯示的是硬件像素).png

從顯示情況來看柒巫，顯然是十分奇怪的，同樣尺寸的手機(jī)谷丸，顯示的圖標(biāo)大小竟然不同堡掏。一般的解決方案是，dpr大(后面會(huì)提到)的設(shè)備下對(duì)圖片進(jìn)行放大處理刨疼，讓圖片的一個(gè)像素覆蓋多個(gè)物理像素泉唁。但是這樣的辦法不可取鹅龄，圖片上(jpg,png,gif)的一個(gè)最小單位成為位圖像素，是不可再分割的亭畜。若想一個(gè)位圖像素覆蓋多個(gè)物理像素砾层，那么就得就近取色進(jìn)行填充，勢(shì)必會(huì)產(chǎn)生模糊贱案。所以很有必要準(zhǔn)備多個(gè)分辨率的圖片，對(duì)于ppi較小的手機(jī)使用分辨率更小的圖標(biāo)止吐。

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

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

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

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

當(dāng)確定了設(shè)備像素比，就確定了設(shè)備獨(dú)立像素二拐。在pc端中操作系統(tǒng)和瀏覽器都能夠改變?cè)O(shè)備像素比服鹅，只不過操作系統(tǒng)改變?cè)O(shè)備像素比后應(yīng)用于全局，瀏覽器改變?cè)O(shè)備像素比應(yīng)用于瀏覽器百新，無(wú)論P(yáng)C端和手機(jī)端都會(huì)有一個(gè)默認(rèn)的合理的設(shè)備像素比的大小企软，一般情況下用戶不會(huì)做更改的。

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

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

win10改變?cè)O(shè)備像素比.png

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

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

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

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

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

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

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

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

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

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

Galaxy S5.png

從上面兩個(gè)設(shè)備來看怔锌，即便分辨率相差較大变过，但是因?yàn)樵O(shè)備獨(dú)立像素的合理設(shè)置，渲染的內(nèi)容比例確是差不多的，也就是說1個(gè)css像素寬度占這兩個(gè)手機(jī)寬度的比例是差不多的阔拳。
各個(gè)手機(jī)的設(shè)備像素比參照

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

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

PC端的布局視口一般與瀏覽器可見窗口寬度一致崭孤，而手機(jī)端中布局視口卻不是一致的，其布局視口遠(yuǎn)遠(yuǎn)大于其設(shè)備獨(dú)立像素糊肠，并有可能還比設(shè)備像素大辨宠，一般在768px~1024px，這是因?yàn)镻C端瀏覽器的頁(yè)面設(shè)計(jì)寬度一般都很大货裹，為了在手機(jī)端也能較好的顯示嗤形，就將手機(jī)端的布局視口設(shè)計(jì)的較大，手機(jī)端可以通過放大縮小來觀看網(wǎng)站的全貌弧圆。但是布局視口的大小并不是理想的手機(jī)視口大小赋兵，當(dāng)網(wǎng)站是專門為手機(jī)設(shè)計(jì)時(shí)，手機(jī)應(yīng)該用回屬于自己的理想視口搔预。
PC端瀏覽器放大時(shí)霹期，css像素視覺上會(huì)變大，但是其數(shù)值卻不變拯田，所以布局視口變小经伙，同理瀏覽器縮小時(shí)，布局視口變大勿锅；
手機(jī)端卻不一樣帕膜，瀏覽器的放大縮小都不會(huì)改變布局視口的寬度。

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

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

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

等價(jià)于用戶看到的區(qū)域內(nèi)的css像素的數(shù)量奸汇。PC端的視覺視口一般等于布局視口，瀏覽器縮放時(shí)，無(wú)論是手機(jī)還是PC端祟霍，大小都會(huì)發(fā)生變化呼渣。瀏覽器縮小時(shí)，用戶看到的css像素多了寞埠，就是變大屁置，反之則變小。

7.css的長(zhǎng)度px仁连、em蓝角、rem、%

  px：絕對(duì)單位饭冬，css的最小單位
  em: 相對(duì)單位使鹅，繼承父節(jié)點(diǎn)字體的大小，相當(dāng)于“倍”昌抠，如果自身定義了font-size按自身來計(jì)算并徘，整個(gè)頁(yè)面內(nèi)1em不是一個(gè)固定的值
 rem: 相對(duì)單位，繼承根節(jié)點(diǎn)html字體大小扰魂，相當(dāng)于“倍”麦乞，相當(dāng)于“倍”，css3屬性劝评，整個(gè)頁(yè)面1rem是一個(gè)固定的值
   %: 相對(duì)單位姐直，不同與vw和vh(后文說)，相對(duì)與什么就具體情況而定蒋畜，較復(fù)雜声畏，若對(duì)于block的高度、寬度，一般相對(duì)于父元素

8.適配眾多分辨率的電腦或手機(jī)

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

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

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

不使用@media均牢，且以比例布局為主糠雨。只要確定了某臺(tái)設(shè)備的頁(yè)面布局，以這臺(tái)設(shè)備作為標(biāo)準(zhǔn)徘跪，其他不同分辨率甘邀、不同大小但是同比例的設(shè)備以此設(shè)備的大小做縮放。如阿里團(tuán)隊(duì)開源的一個(gè)庫(kù)：flexible.js垮庐。原理是通過js控制html的根字體的大小松邪，在dom元素的寬高單位(除文本用px)都使用rem，并動(dòng)態(tài)地改變?cè)O(shè)備像素比和字體大小來實(shí)現(xiàn)不同設(shè)備的統(tǒng)一哨查。

下面是rem自適應(yīng)的一個(gè)例子
比如我們的設(shè)計(jì)稿寬是640px(css)逗抑，以寬度為640px的設(shè)備為基準(zhǔn)，其html字體大小為64px寒亥，1rem=64px邮府，此時(shí)在該設(shè)備設(shè)計(jì)一塊大小為160px的div，160px=2.5rem护盈。所以通過改變html字體的大小挟纱，讓其他設(shè)備同樣使用2.5rem

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

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

vw讹挎、vh校赤、vmin和vmax.png

參考文章：

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