【移動(dòng)端H5網(wǎng)頁(yè)制作的方法和竅門】

創(chuàng)新互聯(lián)為你提供移動(dòng)端H5網(wǎng)頁(yè)制作的方法和竅門。文章中展示了手機(jī)端頁(yè)面頁(yè)面和文字以及圖片的尺寸等等的制作方法和竅門。由于HTML5和微信內(nèi)置瀏覽器的火爆，移動(dòng)端H5網(wǎng)頁(yè)越發(fā)流行。在設(shè)計(jì)制作移動(dòng)端網(wǎng)頁(yè)的時(shí)候，你是否疑惑，這種網(wǎng)站設(shè)計(jì)稿應(yīng)該做成的多少屏寬，是否應(yīng)該跟手機(jī)的分辨率一致，還是應(yīng)該按照iPhone的分辨率來(lái)設(shè)計(jì)(注意H5網(wǎng)頁(yè)區(qū)別于APP，APP的設(shè)計(jì)稿直接按照手機(jī)分辨率來(lái)設(shè)計(jì))?那么對(duì)于現(xiàn)在2K屏幕的手機(jī)，應(yīng)該如何制作設(shè)計(jì)稿和前端稿呢?

由于文章篇幅原因，結(jié)論先行：

1、像素是沒有寬高的(不要被Photoshop中的像素格欺騙)，它只代表一個(gè)采樣的色值。

2、任何圖片作為數(shù)據(jù)信息被保存在存儲(chǔ)盤中時(shí)，只有寬高像素?cái)?shù)是有意義的，此時(shí)的ppi對(duì)于圖片來(lái)說(shuō)時(shí)沒有任何意義，也并不能描述這個(gè)圖片有多少英寸的寬度或者高度，而只有在被打印出來(lái)后才有ppi的意義，被打印出來(lái)才可以描述這張圖片有多高多寬。

3、平時(shí)制作H5頁(yè)面時(shí)設(shè)計(jì)原型時(shí)，產(chǎn)品經(jīng)理出的原型稿建議屏寬為320px，用這個(gè)尺寸一是為了瀏覽方便(現(xiàn)在很多手機(jī)的屏寬達(dá)到1440px，用這個(gè)尺寸去模擬顯然不現(xiàn)實(shí))，二是以iPhone5s為標(biāo)準(zhǔn)的手機(jī)屏寬較小，進(jìn)行內(nèi)容排版布局時(shí)屏寬應(yīng)該向下兼容。

4、制作設(shè)計(jì)稿時(shí)，設(shè)計(jì)師應(yīng)該把原型稿上的所有尺寸進(jìn)行2倍處理。這樣設(shè)計(jì)稿在移動(dòng)設(shè)備上預(yù)覽便可保證清晰。而前端切片時(shí)，按照現(xiàn)在流行的做法，可以直接使用原型稿上的尺寸，也就是設(shè)計(jì)稿上的1/2。

5、一般情況下，H5頁(yè)面設(shè)計(jì)稿做成640x1136px是最為穩(wěn)妥的尺寸，在812px高度處增加一條安全線，重要內(nèi)容在此線之上(網(wǎng)上有些文章說(shuō)安全線是960px處，個(gè)人認(rèn)為不太準(zhǔn)確)。既保證了在移動(dòng)設(shè)備上顯示清晰，也保證了素材的最小尺寸。推薦前端攻城獅使用騰訊智圖，這里的圖片壓縮還是相當(dāng)好用，可以節(jié)省用戶不少帶寬。

先將解決一些基本概念：像素(pixel)、ppi、分辨率、物理像素(physical pixel)、CSS像素、設(shè)備獨(dú)立像素(deviceindependent pixel)等等。

像素(pixel)(像素維基百科)

為圖像顯示的基本單位，表示“圖像元素”之意。每個(gè)這樣的信息元素不是一個(gè)點(diǎn)或者一個(gè)方塊，而是一個(gè)抽象的采樣。仔細(xì)處理的話，一幅圖像中的像素可以在任何尺度上看起來(lái)都不像分離的點(diǎn)或者方塊;但是在很多情況下，它們采用點(diǎn)或者方塊顯示。

這一段是出自維基百科的解釋。其實(shí)很多會(huì)Photoshop的人都有一個(gè)誤區(qū)：認(rèn)為像素是一個(gè)寬高相等的小方塊，并且的像素都是“那么大”，但是不知道這個(gè)寬高的具體數(shù)字。

像素是一個(gè)抽象概念，它是一個(gè)相對(duì)單位。

像素描述的是圖像在某一點(diǎn)的顏色值。一般來(lái)說(shuō)，一個(gè)像素只能描述一種顏色值。

先可以跳過這個(gè)話題，介紹ppi概念，像素沒有大小就好理解了。

PPI

PPI的復(fù)雜之處在于如果他所屬的上下文環(huán)境不同，意義也會(huì)完全不一樣。 當(dāng)我們?cè)谡務(wù)擄@示設(shè)備的PPI時(shí)，它代指的屏幕的像素密度;當(dāng)我們?cè)谡務(wù)摵蛨D片相關(guān)時(shí)，我們談?wù)摰氖谴蛴r(shí)的分辨率或者打印機(jī)的打印精度。這里我們主要描述的前一種情況。

PPI全稱為Pixel Per Inch，譯為每英寸像素取值，更確切的說(shuō)法應(yīng)該是像素密度，也就是衡量單位物理面積內(nèi)擁有像素值的情況。

圖1

舉例1：

中的七張圖，假設(shè)圖片尺寸都為1x1寸，那么 PPI 分別為 1、2、5、10、20、50、100 。在同一物理尺寸內(nèi)，隨著像素?cái)?shù)的增大，圖像細(xì)節(jié)越多， PPI 增大，圖像越清晰，像素所占空間相對(duì)越小。

因此，從討論像素大小的角度來(lái)說(shuō)，圖①中各個(gè)方框像素的寬度(單位為英寸)分別為：1、1/2、1/5、1/10、1/20、1/50、1/100。像素在每個(gè)不同ppi下大小都不同，因此討論像素的大小也就變得無(wú)意義了。像素是沒有大小的。像素是一個(gè)抽象概念，它是一個(gè)相對(duì)單位。

像素描述的是圖像在某一點(diǎn)的顏色值。一般來(lái)說(shuō)，一個(gè)像素只能描述一種顏色值。

舉例2：

在photoshop中分別建立兩個(gè)文檔：①800x600px，72ppi，②800x600px，300ppi。那么這兩個(gè)文檔在PS或者生成圖片時(shí)，顯示的視覺效果是完全一樣的，因?yàn)閷捀叩南袼攸c(diǎn)數(shù)是完全一樣的，在設(shè)備上渲染出來(lái)的效果圖是一致的。當(dāng)你把文檔②中的任意圖層復(fù)制到文檔①中，從視覺上發(fā)現(xiàn)圖層不會(huì)變大或者縮小。只有把這兩個(gè)文檔作為圖片1:1打印出來(lái)時(shí)，才會(huì)發(fā)現(xiàn)72ppi的圖片要大于300ppi的圖片(注意ppi的含義)，前者寬(高)大約是后者的4.16(300/72)倍。

任何圖片作為數(shù)據(jù)信息被保存在存儲(chǔ)盤中時(shí)，只有寬高像素?cái)?shù)是有意義的，ppi對(duì)于圖片來(lái)說(shuō)時(shí)沒有任何意義的，也并不能描述這個(gè)圖片有多少英寸的寬度或者高度，而只有在被打印出來(lái)后才有他的意義。

分辨率

分辨率泛指顯示系統(tǒng)對(duì)細(xì)節(jié)的分辨能力。能顯示圖像都能叫顯示系統(tǒng)，比如顯示器，投影儀，照片。

分辨率常用的單位有：dpi(點(diǎn)每英寸)、lpi(線每英寸)和ppi(像素每英寸)。從單位來(lái)看，分辨率是一個(gè)比值，與物理單位的比值。

日常所說(shuō)的“這張圖片的尺寸(或分辨率)是100x100像素”，一般都是在描述數(shù)字圖片，這樣的描述只是說(shuō)明了圖片文件包含多少個(gè)像素。比如圖1中的七張圖，我們習(xí)慣于說(shuō)，第1張圖的分辨率是1x1像素，第5張圖的分辨率是20x20像素，其實(shí)只是說(shuō)明了圖片的像素?cái)?shù)而已。

Retina顯示屏

這是一種顯示技術(shù)，可以將把更多的像素點(diǎn)壓縮至一塊屏幕里，從而達(dá)到更高的分辨率并提高屏幕顯示的細(xì)膩程度，這種分辨率在正常觀看距離下足以使人肉眼無(wú)法分辨其中的單獨(dú)像素。

最先使用retina屏幕是iphone 4，屏幕分辨率為960 * 640(326ppi)。

對(duì)比如下兩幅圖，可以清晰地看出是否 Retina 屏的顯示差異：

圖2 iPhone 3GS

圖3 iPhone 4

兩代iPhone 的物理尺寸(屏幕寬高有多少英寸)是一樣的，從上圖可以看出，iphone 4的顯示效果要明顯好于iphone 3GS，雖然 iPhone 4 分辨率提高了，但它不同于普通的電腦顯示器那樣為了顯示更多的內(nèi)容，而是提升顯示相同內(nèi)容時(shí)的畫面精細(xì)程度。這種提升方式是靠提升單位面積屏幕的像素?cái)?shù)量，即像素密度來(lái)提升分辨率，這樣做的主要目的是為了提高屏幕顯示畫面的精細(xì)程度。以第三代 MacBook Pro with Retina Display為例， 工作時(shí)顯卡渲染出的2880x1880個(gè)像素每四個(gè)一組，輸出原來(lái)屏幕的一個(gè)像素顯示的大小區(qū)域內(nèi)的圖像。這樣一來(lái)，用戶所看到的圖標(biāo)與文字的大小與原來(lái)的1440x900分辨率顯示屏相同，但精細(xì)度是原來(lái)的4倍。

注意：在桌面顯示器中，我們調(diào)整了顯示分辨率，比如從 800 * 600 調(diào)整到 1024 * 768 時(shí)，屏幕的文字圖標(biāo)會(huì)變小，顯示的內(nèi)容更多了。但 Retina 顯示方式不會(huì)產(chǎn)生這樣的問題，或者說(shuō)， Retina 顯示技術(shù)解決的是顯示畫面精細(xì)程度的問題，而不是解決顯示內(nèi)容容量的問題。

設(shè)備獨(dú)立像素

為什么是“每四個(gè)一組”?而且要讓這四個(gè)一組來(lái)顯示“原來(lái)屏幕的一個(gè)像素”?這大概就是 Retina 顯示技術(shù)的一種表現(xiàn)吧。而這“每四個(gè)一組”的“大像素”，可以被稱作“設(shè)備獨(dú)立像素”， device independent pixel ，或者 density-independentpixel ，它可以是系統(tǒng)中的一個(gè)點(diǎn)，這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素，然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。

“設(shè)備獨(dú)立像素”也有人稱為“CSS像素”，一種形象的說(shuō)法，更傾向于表明與 CSS 中尺寸的對(duì)應(yīng)。

設(shè)備獨(dú)立像素與物理像素的對(duì)應(yīng)關(guān)系，可以這樣看：

圖4

類似的每四個(gè)一組的對(duì)應(yīng)關(guān)系，也許正是 Retina 顯示技術(shù)所做的。

CSS像素

作為Web開發(fā)者，我們接觸的更多的是用于控制元素樣式的樣式單位像素。這里的像素我們稱之為CSS像素。

CSS像素有什么特別的地方?我們可以借用quirksmode中的這個(gè)例子：

假設(shè)我們用PC瀏覽器打開一個(gè)頁(yè)面，瀏覽器此時(shí)的寬度為800px，頁(yè)面上同時(shí)有一個(gè)400px寬的塊級(jí)元素容器。很明顯此時(shí)塊狀容器應(yīng)該占頁(yè)面的一半。

但如果我們把頁(yè)面放大(通過“Ctrl鍵”加上“+號(hào)鍵”)，放大為200%，也就是原來(lái)的兩倍。此時(shí)塊狀容器則橫向占滿了整個(gè)瀏覽器。

吊詭的是此時(shí)我們既沒有調(diào)整瀏覽器窗口大小，也沒有改變塊狀元素的css寬度，但是它看上去卻變大了一倍——這是因?yàn)槲覀儼袰SS像素放大為了原來(lái)的兩倍。

CSS像素與屏幕像素1：1同樣大小時(shí)：

圖5

CSS像素(黑色邊框)開始被拉伸，此時(shí)1個(gè)CSS像素大于1個(gè)屏幕像素

圖6

也就是說(shuō)默認(rèn)情況下一個(gè)CSS像素應(yīng)該是等于一個(gè)物理像素的寬度的，但是瀏覽器的放大操作讓一個(gè)CSS像素等于了兩個(gè)設(shè)備像素寬度。在后面你會(huì)看到更復(fù)雜的情況，在高PPI的設(shè)備上，CSS像素甚至在默認(rèn)狀態(tài)下就相當(dāng)于多個(gè)物理像素的尺寸。

從上面的例子可以看出，CSS像素從來(lái)都只是一個(gè)相對(duì)值。

設(shè)備像素比(DevicePixelRatio)

設(shè)備像素比=設(shè)備物理像素/設(shè)備獨(dú)立像素

設(shè)備像素比在 js 中可以通過 devicePixelRatio 的參數(shù)取得(需要頁(yè)面的 viewport 設(shè)置為 content=”width=device-width” 此處為前端布局知識(shí)，較為專業(yè)，筆者也只是意會(huì)，無(wú)法說(shuō)清楚，請(qǐng)自行百度)

iPhone 4 的設(shè)備像素比為2，線長(zhǎng)(橫向、縱向、對(duì)角線)上的物理像素?cái)?shù)與設(shè)備獨(dú)立像素?cái)?shù)的對(duì)應(yīng)關(guān)系即為2。

根據(jù)這個(gè)對(duì)應(yīng)關(guān)系，一般可以通過屏幕的物理分辨率和設(shè)備像素比確定設(shè)備獨(dú)立像素?cái)?shù)。

那么在我們做移動(dòng)端網(wǎng)站時(shí)，將viewport設(shè)置了content=”width=device-width”，設(shè)備獨(dú)立像素也就等于CSS像素。

歷史問題屏寬320px

經(jīng)常在做移動(dòng)端網(wǎng)站時(shí)，我們會(huì)聽到一些人說(shuō)原型稿屏寬做成320px，設(shè)計(jì)稿做2倍640px，網(wǎng)上也有很多文章說(shuō)這樣說(shuō)，H5網(wǎng)頁(yè)的設(shè)計(jì)稿做成2倍普通屏分辨率就行了。

這是一個(gè)歷史遺留問題，這里提到的屏寬，更確切的說(shuō)，是將viewport設(shè)置為width=device-width時(shí)的寬度，習(xí)慣稱這個(gè)寬度為屏寬，也就是設(shè)備獨(dú)立像素的寬度。筆者從其他文章中找到了一些答案。(原型圖屏寬是320px是為了滿足原型軟件在1：1比例顯示上適當(dāng)，二是為了保證早期iphone320px屏寬的顯示需求)

“其實(shí)這個(gè)屬性值很有意思，字面意應(yīng)該是 viewport 寬度等于設(shè)備寬度，但在實(shí)際中不同的瀏覽器都給出了個(gè)定值：320px;這個(gè)值還是源于 Apple ，因?yàn)樵缙?iPhone 的分辨率為 320px*480px ，大量為 iPhone 量身定制的網(wǎng)站都設(shè)置了 viewport:width=device-width ，并且按照寬度 320px 來(lái)設(shè)計(jì)制作，所以其他瀏覽器加入 viewport 支持時(shí)為了兼容性也將 device-width 定義為了 320px ?！?/p>

那么到了后來(lái)的iPhone4的屏幕是960x640px，幾乎所有人都知道Retina顯示屏，所有方向上的像素都成了原來(lái)的2倍。而設(shè)備獨(dú)立像素的屏寬還是保持著320px。其它智能手機(jī)早期的分辨率基本上也使用了大致相同的屏幕尺寸與分辨率，因此才有了 320px 這個(gè)不約而同的約定。

當(dāng)然，如果把 viewport 的 width 屬性設(shè)置為一個(gè)定值，比如 320、 480、 700 等等，那 viewport 的寬度即為設(shè)定的寬度。此時(shí)，設(shè)備獨(dú)立像素寬度，也即所設(shè)定的寬度，而物理像素與設(shè)備獨(dú)立像素的比值，則不再是最初始的設(shè)備像素比值了(比如 iPhone 4 中的2)。

現(xiàn)在的智能手機(jī)屏幕尺吋多樣，分辨率有很多種，相應(yīng)地，設(shè)備像素比也不一致，有1、1.5、2、2.25、3等等，而在一般情況下(指 viewport 設(shè)置為 width=device-width 時(shí))的設(shè)備獨(dú)立像素寬度，也不再只是 320px 了，還有 360px 、 400px等等。 這是從 http://screensiz.es/phone統(tǒng)計(jì)的大部分手機(jī)獨(dú)立像素?cái)?shù)據(jù)。

表1

若設(shè)備像素比是N，就表示該手機(jī)屏幕上的N個(gè)物理像素來(lái)顯示一個(gè)CSS像素。

本文對(duì)已移動(dòng)端網(wǎng)站涉及到的一些概念進(jìn)行了較為基礎(chǔ)的解釋，在下一篇中，會(huì)介紹H5網(wǎng)頁(yè)在做設(shè)計(jì)稿以及前端布局時(shí)的最為省力的方法。

從原理開始介紹一下移動(dòng)端設(shè)計(jì)尺寸規(guī)范右鍵“在新標(biāo)簽頁(yè)中打開圖片”看

初涉移動(dòng)端設(shè)計(jì)和開發(fā)的同學(xué)們，基本都會(huì)在尺寸問題上糾結(jié)好一陣子才能摸到頭緒。我也花了很長(zhǎng)時(shí)間才弄明白，感覺有必要寫一篇足夠通俗易懂的教程來(lái)幫助大家。從原理說(shuō)起，理清關(guān)于尺寸的所有細(xì)節(jié)。由于是寫給初學(xué)者的，所以不要嫌我啰嗦。

推薦配合這個(gè)閱讀：《 最新Android &iOS設(shè)計(jì)尺寸規(guī)范 》

現(xiàn)象

首先說(shuō)現(xiàn)象，大家都知道移動(dòng)端設(shè)備屏幕尺寸非常多，碎片化嚴(yán)重。尤其是Android，你會(huì)聽到很多種分辨率：480x800, 480x854,

540x960, 720x1280, 1080x1920，而且還有傳說(shuō)中的2K屏。近年來(lái)iPhone的碎片化也加劇了：640x960, 640x1136,

750x1334, 1242x2208。

不要被這些尺寸嚇倒。實(shí)際上大部分的app和移動(dòng)端網(wǎng)頁(yè)，在各種尺寸的屏幕上都能正常顯示。說(shuō)明尺寸的問題一定有解決方法，而且有規(guī)律可循。

像素密度

要知道，屏幕是由很多像素點(diǎn)組成的。之前提到那么多種分辨率，都是手機(jī)屏幕的實(shí)際像素尺寸。比如480x800的屏幕，就是由800行、480列的像素點(diǎn)組成的。每個(gè)點(diǎn)發(fā)出不同顏色的光，構(gòu)成我們所看到的畫面。而手機(jī)屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone

3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。剛好兩倍，然而兩款手機(jī)都是3.5英寸的。

所以，我們要引入最重要的一個(gè)概念：像素密度，也就是PPI(pixels per inch)。這項(xiàng)指標(biāo)是連接數(shù)字世界與物理世界的橋梁。Pixels perinch，準(zhǔn)確的說(shuō)是每英寸的長(zhǎng)度上排列的像素點(diǎn)數(shù)量。1英寸是一個(gè)固定長(zhǎng)度，等于2.54厘米，大約是食指最末端那根指節(jié)的長(zhǎng)度。像素密度越高，代表屏幕顯示效果越精細(xì)。Retina屏比普通屏清晰很多，就是因?yàn)樗南袼孛芏确艘槐丁?/p>

倍率與邏輯像素再用iPhone3gs和4s來(lái)舉例。假設(shè)有個(gè)郵件列表界面，我們不妨按照PC端網(wǎng)頁(yè)設(shè)計(jì)的思維來(lái)想象。3gs上大概只能顯示4-5行，4s就能顯示9-10行，而且每行會(huì)變得特別寬。但兩款手機(jī)其實(shí)是一樣大的。如果照這種方式顯示，3gs上剛剛好的效果，在4s上就會(huì)小到根本看不清字。在現(xiàn)實(shí)中，這兩者效果卻是一樣的。這是因?yàn)镽etina屏幕把2x2個(gè)像素當(dāng)1個(gè)像素使用。比如原本44像素高的頂部導(dǎo)航欄，在Retina屏上用了88個(gè)像素的高度來(lái)顯示。導(dǎo)致界面元素都變成2倍大小，反而和3gs效果一樣了。畫質(zhì)卻更清晰。

在以前，iOS應(yīng)用的資源圖片中，同一張圖通常有兩個(gè)尺寸。你會(huì)看到文件名有的帶@2x字樣，有的不帶。其中不帶@2x的用在普通屏上，帶@2x的用在Retina屏上。只要圖片準(zhǔn)備好，iOS會(huì)自己判斷用哪張，Android道理也一樣。

由此可以看出，蘋果以普通屏為基準(zhǔn)，給Retina屏定義了一個(gè)2倍的倍率(iPhone6plus除外，它達(dá)到了3倍)。實(shí)際像素除以倍率，就得到邏輯像素尺寸。只要兩個(gè)屏幕邏輯像素相同，它們的顯示效果就是相同的。

Android的解決方法類似，但更復(fù)雜一些。因?yàn)锳ndroid屏幕尺寸實(shí)在太多，分辨率高低跨度非常大，不像蘋果只有那么幾款固定設(shè)備、固定尺寸。所以Android把各種設(shè)備的像素密度劃成了好幾個(gè)范圍區(qū)間，給不同范圍的設(shè)備定義了不同的倍率，來(lái)保證顯示效果相近。像素密度概念雖然重要，但用不著我們自己算，iOS與Android都幫我們算好了。

如圖所示，像素密度在120左右的屏幕歸為ldpi，160左右的歸為mdpi，以此類推。這樣，所有的Android屏幕都找到了自己的位置，并賦予了相應(yīng)的倍率：

ldpi [0.75倍]

mdpi [1倍]

hdpi [1.5倍]

xhdpi [2倍]

xxhdpi [3倍]

xxxhdpi [4倍]

各型號(hào)iPhone的倍率比較簡(jiǎn)單，我們后面會(huì)講到。那么Android手機(jī)那么多，具體怎么分?哪些手機(jī)是幾倍的倍率呢?我們先看一張表，這是友盟2014年10月到2015年03月的數(shù)據(jù)：

就目前市場(chǎng)狀況而言，各種手機(jī)的分辨率可以這樣粗略判斷。雖然不全面，但至少在1年內(nèi)都還有一定的參考意義：

ldpi 如今已絕跡，不用考慮

mdpi [320x480](市場(chǎng)份額不足5%，新手機(jī)不會(huì)有這種倍率，屏幕通常都特別小)

hdpi [480x800、480x854、540x960](早年的低端機(jī)，屏幕在3.5英寸檔位;如今的低端機(jī)，屏幕在4.7-5.0英寸檔位)

xhdpi [720x1280](早年的中端機(jī)，屏幕在4.7-5.0英寸檔位;如今的中低端機(jī)，屏幕在5.0-5.5英寸檔位)

xxhdpi [1080x1920](早年的高端機(jī)，如今的中高端機(jī)，屏幕通常都在5.0英寸以上)

xxxhdpi [1440x2560](極少數(shù)2K屏手機(jī)，比如Google Nexus 6)

自然地，以1倍的mdpi作為基準(zhǔn)。像素密度更高或者更低的設(shè)備，只需乘以相應(yīng)的倍率，就能得到與基準(zhǔn)倍率近似的顯示效果。

不過需要注意的是，Android設(shè)備的邏輯像素尺寸并不統(tǒng)一。比如兩種常見的屏幕480x800和1080x1920，它們分別屬于hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到邏輯像素為320x533和360x640。很顯然，后者更寬更高，能顯示更多內(nèi)容。所以，即使有倍率的存在，各種Android設(shè)備的顯示效果仍然無(wú)法做到完全一致。

單位

不難發(fā)現(xiàn)，真正決定顯示效果的，是邏輯像素尺寸。為此，iOS和Android平臺(tái)都定義了各自的邏輯像素單位。iOS的尺寸單位為pt，Android的尺寸單位為dp。說(shuō)實(shí)話，兩者其實(shí)是一回事。

單位之間的換算關(guān)系隨倍率變化：

1倍：1pt=1dp=1px(mdpi、iPhone 3gs)

1.5倍：1pt=1dp=1.5px(hdpi)

2倍：1pt=1dp=2px(xhdpi、iPhone 4s/5/6)

3倍：1pt=1dp=3px(xxhdpi、iPhone 6)

4倍：1pt=1dp=4px(xxxhdpi)

單位決定了我們的思考方式。在設(shè)計(jì)和開發(fā)過程中，應(yīng)該盡量使用邏輯像素尺寸來(lái)思考界面。設(shè)計(jì)Android應(yīng)用時(shí)，有的設(shè)計(jì)師喜歡把畫布設(shè)為1080x1920，有的喜歡設(shè)成720x1280。給出的界面元素尺寸就不統(tǒng)一了。Android的最小點(diǎn)擊區(qū)域尺寸是48x48dp，這就意味著在xhdpi的設(shè)備上，按鈕尺寸至少是96x96px。而在xxhdpi設(shè)備上，則是144x144px。

無(wú)論畫布設(shè)成多大，我們?cè)O(shè)計(jì)的是基準(zhǔn)倍率的界面樣式，而且開發(fā)人員需要的單位都是邏輯像素。所以為了保證準(zhǔn)確高效的溝通，雙方都需要以邏輯像素尺寸來(lái)描述和理解界面，無(wú)論是在標(biāo)注圖還是在日常溝通中。不要再說(shuō)“底部標(biāo)簽欄的高度是96像素，我是按照xhdpi做的”這樣的話了。

Web怎么辦

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

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

以iPhone

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

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

大家最關(guān)心的還是實(shí)際運(yùn)用，畫布該怎么設(shè)置。我們就iOS、Android、Web三個(gè)平臺(tái)來(lái)分別梳理一下。不過在這之前，我要為使用PS進(jìn)行設(shè)計(jì)的朋友介紹一個(gè)小技巧。之前我說(shuō)過，我們要以邏輯像素尺寸來(lái)思考界面。體現(xiàn)到設(shè)計(jì)過程中，就是要把單位設(shè)置成邏輯像素。打開PS的選項(xiàng)——單位與標(biāo)尺界面，把尺寸和文字單位都改成點(diǎn)(Point)。這里的點(diǎn)也就是pt，無(wú)論設(shè)計(jì)iOS、Android還是Web應(yīng)用，單位都用它。當(dāng)然，各平臺(tái)單位名稱還是要記住的。這里我們用的只是它的原理，不用在意名稱。

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

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

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

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

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

iPhone

iPhone的屏幕尺寸各不相同，我說(shuō)的是邏輯像素尺寸，這確實(shí)是讓人很頭疼的事情。如果想用一套設(shè)計(jì)涵蓋所有iPhone，就要選擇邏輯像素折中的機(jī)型。從市場(chǎng)占有率數(shù)據(jù)來(lái)看，目前最多的是iPhone5/5s的屏幕。倍率為2，邏輯像素320x568。上升勢(shì)頭最猛，未來(lái)有望登上第一的是iPhone6的屏幕。倍率為2，邏輯像素375x667。按照這兩種尺寸來(lái)設(shè)計(jì)，都是比較主流的做法。可以兼顧短一些的iPhone 4s，大一點(diǎn)的6 plus也不會(huì)過于空曠。

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

Android

都說(shuō)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ī)在用，軟件多了必卡無(wú)疑，用戶體驗(yàn)無(wú)從談起。不作考慮也是OK的。

Web

手機(jī)端網(wǎng)頁(yè)就沒有統(tǒng)一標(biāo)準(zhǔn)了，比較流行的做法是按照iPhone 5的尺寸來(lái)設(shè)計(jì)。倍率2，邏輯像素320x568。這樣的做法比較實(shí)在，倍率2的屏幕無(wú)論在iOS還是Android方面都是主流，而且又是2倍屏幕中邏輯像素最小的。所以圖片的尺寸可以保持在較小的水平，頁(yè)面加載速度快。當(dāng)然，缺點(diǎn)就是在倍率3的設(shè)備上看，圖片不是特別清晰。如果追求圖片質(zhì)量，愿意犧牲加載速度，那么可以按照大的屏幕來(lái)設(shè)計(jì)。也就是iPhone 6 plus的尺寸，倍率3，邏輯像素414x736。

總結(jié)

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

創(chuàng)新互聯(lián)溫馨提示創(chuàng)新互聯(lián)不僅僅做手機(jī)網(wǎng)站設(shè)計(jì)，也做PC端網(wǎng)站設(shè)計(jì)。

分享名稱：【移動(dòng)端H5網(wǎng)頁(yè)制作的方法和竅門】
網(wǎng)頁(yè)路徑：http://www.muchs.cn/news33/164233.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、全網(wǎng)營(yíng)銷推廣、網(wǎng)站建設(shè)、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)