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

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

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

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

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

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

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

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

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

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

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

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

像素是一個抽象概念，它是一個相對單位。

像素描述的是圖像在某一點的顏色值。一般來說，一個像素只能描述一種顏色值。

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

PPI

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

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

圖1

舉例1：

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

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

像素描述的是圖像在某一點的顏色值。一般來說，一個像素只能描述一種顏色值。

舉例2：

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

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

分辨率

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

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

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

Retina顯示屏

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

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

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

圖2 iPhone 3GS

圖3 iPhone 4

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

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

設(shè)備獨立像素

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

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

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

圖4

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

CSS像素

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

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

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

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

吊詭的是此時我們既沒有調(diào)整瀏覽器窗口大小，也沒有改變塊狀元素的css寬度，但是它看上去卻變大了一倍——這是因為我們把CSS像素放大為了原來的兩倍。

CSS像素與屏幕像素1：1同樣大小時：

圖5

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

圖6

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

從上面的例子可以看出，CSS像素從來都只是一個相對值。

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

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

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

iPhone 4 的設(shè)備像素比為2，線長(橫向、縱向、對角線)上的物理像素數(shù)與設(shè)備獨立像素數(shù)的對應(yīng)關(guān)系即為2。

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

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

歷史問題屏寬320px

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

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

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

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

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

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

表1

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

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

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

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

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

現(xiàn)象

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

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

750x1334, 1242x2208。

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

像素密度

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

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

所以，我們要引入最重要的一個概念：像素密度，也就是PPI(pixels per inch)。這項指標(biāo)是連接數(shù)字世界與物理世界的橋梁。Pixels perinch，準(zhǔn)確的說是每英寸的長度上排列的像素點數(shù)量。1英寸是一個固定長度，等于2.54厘米，大約是食指最末端那根指節(jié)的長度。像素密度越高，代表屏幕顯示效果越精細。Retina屏比普通屏清晰很多，就是因為它的像素密度翻了一倍。

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

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

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

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

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

ldpi [0.75倍]

mdpi [1倍]

hdpi [1.5倍]

xhdpi [2倍]

xxhdpi [3倍]

xxxhdpi [4倍]

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

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

ldpi 如今已絕跡，不用考慮

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

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

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

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

xxxhdpi [1440x2560](極少數(shù)2K屏手機，比如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è)備的顯示效果仍然無法做到完全一致。

單位

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

單位之間的換算關(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è)計和開發(fā)過程中，應(yīng)該盡量使用邏輯像素尺寸來思考界面。設(shè)計Android應(yīng)用時，有的設(shè)計師喜歡把畫布設(shè)為1080x1920，有的喜歡設(shè)成720x1280。給出的界面元素尺寸就不統(tǒng)一了。Android的最小點擊區(qū)域尺寸是48x48dp，這就意味著在xhdpi的設(shè)備上，按鈕尺寸至少是96x96px。而在xxhdpi設(shè)備上，則是144x144px。

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

Web怎么辦

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

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

以iPhone

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

實際應(yīng)用

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

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

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

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

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

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

iPhone

iPhone的屏幕尺寸各不相同，我說的是邏輯像素尺寸，這確實是讓人很頭疼的事情。如果想用一套設(shè)計涵蓋所有iPhone，就要選擇邏輯像素折中的機型。從市場占有率數(shù)據(jù)來看，目前最多的是iPhone5/5s的屏幕。倍率為2，邏輯像素320x568。上升勢頭最猛，未來有望登上第一的是iPhone6的屏幕。倍率為2，邏輯像素375x667。按照這兩種尺寸來設(shè)計，都是比較主流的做法?？梢约骖櫠桃恍┑膇Phone 4s，大一點的6 plus也不會過于空曠。

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

Android

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

對于那些比較老的低端機，寬度是480px的那批，畫面確實會小一些，顯示內(nèi)容會更少。稍微留意一下，重要內(nèi)容盡量保持在界面中上部分。當(dāng)然，這些機型不出一年就會被邊緣化，基本淘汰?，F(xiàn)在能運轉(zhuǎn)的也是當(dāng)作功能機在用，軟件多了必卡無疑，用戶體驗無從談起。不作考慮也是OK的。

Web

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

總結(jié)

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

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

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

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

廣告

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