Web怎么辦

　　移動(dòng)端頁面的絕對(duì)單位仍然是px，至少代碼里這么寫，但它的道理也和app一樣。由于像素密度是設(shè)備本身的固有屬性，它會(huì)影響到設(shè)備中的所有應(yīng)用，包括瀏覽器。前端技術(shù)可以善加利用設(shè)備的像素密度，只需一行代碼，瀏覽器便會(huì)使用app的顯示方式來渲染頁面。根據(jù)像素密度，按相應(yīng)倍率縮放。

　　可以通過這個(gè)測(cè)試頁面響應(yīng)式斷點(diǎn).html來看看你的移動(dòng)設(shè)備屏幕寬度，這是邏輯像素寬度。

　　以iPhone5s為例，屏幕的分辨率是640x1136，倍率是2。瀏覽器會(huì)認(rèn)為屏幕的分辨率是320x568，仍然是基準(zhǔn)倍率的尺寸。所以在制作頁面時(shí)，只需要按照基準(zhǔn)倍率來就行了。無論什么樣的屏幕，倍率是多少，都按邏輯像素尺寸來設(shè)計(jì)和開發(fā)頁面。只不過在準(zhǔn)備資源圖的時(shí)候，需要準(zhǔn)備2倍大小的圖，通過代碼把它縮成1倍大小顯示，才能保證清晰。

　　實(shí)際應(yīng)用

　　大家最關(guān)心的還是實(shí)際運(yùn)用，畫布該怎么設(shè)置。我們就iOS、Android、Web三個(gè)平臺(tái)來分別梳理一下。不過在這之前，我要為使用PS進(jìn)行設(shè)計(jì)的朋友介紹一個(gè)小技巧。

　　之前我說過，我們要以邏輯像素尺寸來思考界面。體現(xiàn)到設(shè)計(jì)過程中，就是要把單位設(shè)置成邏輯像素。打開PS的首選項(xiàng)——單位與標(biāo)尺界面，把尺寸和文字單位都改成點(diǎn)(Point)。這里的點(diǎn)也就是pt，無論設(shè)計(jì)iOS、Android還是Web應(yīng)用，單位都用它。當(dāng)然，各平臺(tái)單位名稱還是要記住的。這里我們用的只是它的原理，不用在意名稱。

　　要調(diào)節(jié)倍率，則通過圖像大小里的DPI來控制。這個(gè)DPI，其實(shí)就是PPI，像素密度。有個(gè)常識(shí)大家都知道，屏幕上的設(shè)計(jì)DPI設(shè)成72，印刷品設(shè)計(jì)DPI設(shè)成300。為什么是這兩個(gè)數(shù)字?

　　首先說300，這和人眼的分辨能力有關(guān)。由于1英寸是固定長度，每1英寸有多少個(gè)像素點(diǎn)決定了畫質(zhì)清晰程度。之前說過，這就是像素密度，也就是DPI。DPI達(dá)到300以上，其細(xì)膩程度就會(huì)給人真實(shí)感，像真實(shí)世界中的物件。相反，DPI只有10的話，在你一個(gè)食指指節(jié)大小的長度內(nèi)只有10個(gè)像素，這明顯就是馬賽克了。所以印刷品要設(shè)成300，才能保證清晰。

　　再說72，這有一定的歷史原因。最早的圖形設(shè)計(jì)是在mac電腦上進(jìn)行的，mac本身的顯示器分辨率就是72。PS中把圖像DPI也設(shè)成72，就能保證屏幕上顯示的尺寸和打印尺寸相同，便于設(shè)計(jì)。72的PC顯示器分辨率逐漸成為一種默認(rèn)的行業(yè)標(biāo)準(zhǔn)，這套規(guī)則就這么沿用下來。

　　現(xiàn)在回到正題，我們?cè)趺赐ㄟ^DPI來調(diào)節(jié)倍率?既然屏幕本身的分辨率是72，DPI設(shè)成72剛好是1倍尺寸，那設(shè)成72的兩倍就是倍率為2的屏幕了，就這么簡單。

　　下面來看看3個(gè)平臺(tái)各自的畫布設(shè)置：

　　iPhone

　　iPhone的屏幕尺寸各不相同，我說的是邏輯像素尺寸，這確實(shí)是讓人很頭疼的事情。如果想用一套設(shè)計(jì)涵蓋所有iPhone，就要選擇邏輯像素折中的機(jī)型。

　　從市場(chǎng)占有率數(shù)據(jù)來看，目前最多的是iPhone5/5s的屏幕。倍率為2，邏輯像素320x568。上升勢(shì)頭最猛，未來有望登上第一的是iPhone6的屏幕。倍率為2，邏輯像素375x667。

　　按照這兩種尺寸來設(shè)計(jì)，都是比較主流的做法?？梢约骖櫠桃恍┑膇Phone4s，大一點(diǎn)的6plus也不會(huì)過于空曠。

　　不過在切圖的時(shí)候要注意，由于iPhone6plus的3倍圖是由2倍圖放大而來，所以位圖要注意保證清晰。

　　Android

　　都說Android碎片化嚴(yán)重，但它現(xiàn)在反而比iOS好處理。因?yàn)槿缃竦腁ndroid屏幕邏輯像素已經(jīng)趨于統(tǒng)一了：360x640，就看你設(shè)成幾倍了。想以xhdpi為準(zhǔn)，就把DPI設(shè)成72x2=144。想以xxhdpi為準(zhǔn)，就把DPI設(shè)成72x3=216。

　　對(duì)于那些比較老的低端機(jī)，寬度是480px的那批，畫面確實(shí)會(huì)小一些，顯示內(nèi)容會(huì)更少。稍微留意一下，重要內(nèi)容盡量保持在界面中上部分。

　　當(dāng)然，這些機(jī)型不出一年就會(huì)被邊緣化，基本淘汰?，F(xiàn)在能運(yùn)轉(zhuǎn)的也是當(dāng)作功能機(jī)在用，軟件多了必卡無疑，用戶體驗(yàn)無從談起。不作考慮也是OK的。

　　Web

　　手機(jī)端網(wǎng)頁就沒有統(tǒng)一標(biāo)準(zhǔn)了，比較流行的做法是按照iPhone5的尺寸來設(shè)計(jì)。倍率2，邏輯像素320x568。

　　這樣的做法比較實(shí)在，倍率2的屏幕無論在iOS還是Android方面都是主流，而且又是2倍屏幕中邏輯像素最小的。所以圖片的尺寸可以保持在較小的水平，頁面加載速度快。當(dāng)然，缺點(diǎn)就是在倍率3的設(shè)備上看，圖片不是特別清晰。

　　如果追求圖片質(zhì)量，愿意犧牲加載速度，那么可以按照最大的屏幕來設(shè)計(jì)。也就是iPhone6plus的尺寸，倍率3，邏輯像素414x736。

　　總結(jié)

　　移動(dòng)端的尺寸比PC端復(fù)雜，關(guān)鍵就在倍率。但也正因?yàn)楸堵实拇嬖?，把大大小小的屏幕拉回到同一水平線，得以保證一套設(shè)計(jì)適應(yīng)各種屏幕。站在這條水平線的角度看，會(huì)發(fā)現(xiàn)它很好理解。