可以使用手機最高分辨率，設(shè)備默認分辨率，或者自己指定210dpi等等參數(shù)。其次就是布局的響應(yīng)式問題，這就是你基本技術(shù)的一次改變，可能會復(fù)雜一些了。這需要慢慢修改。例如如果將虛擬網(wǎng)頁頁面布局劃分為5列，當實際屏幕的像素數(shù)在500以下時你可能每行只顯示3列，然后另外兩列則變成了插入的第二行了。或者圖片都應(yīng)該有一些通用的自動適應(yīng)外邊容器的寬度和高度的css。或者不同分辨率下的不同業(yè)務(wù)部分（用class區(qū)分）字體的字體的自動變大。這樣才能保證（上述列寬自動調(diào)整之類的）自動排版下的頁面顯示的內(nèi)容比較清晰易讀、留白比較合理。這個層次需要進行統(tǒng)一的設(shè)計。

手機UI主要針對移動客戶端，比如手機、pad 等，網(wǎng)頁UI主要則針對的是電腦顯示器中需要的網(wǎng)頁UI設(shè)計等，原理一樣，尺寸是不一樣的哦。

如果是手機端的web頁面 我認為沒區(qū)別 手機瀏覽器要支持存在的網(wǎng)頁如果是原生APP開發(fā) 在界面設(shè)計理念上也沒有區(qū)別 但是觸控等特性在設(shè)計上還是要注意的

"對于用戶來說，html5提高了用戶體驗，加強了視覺感受。1、HTML5技術(shù)在移動端，能夠讓應(yīng)用程序回歸到網(wǎng)頁，并對網(wǎng)頁的功能進行擴展，用戶不需要下載客戶端或插件就能夠觀看視頻、玩游戲，操作更加簡單，用戶體驗更好。2、HTML5的視音頻新技術(shù)解決了移動端蘋果和安卓4.0+，對flash的支持問題。在視音頻方面，性能表現(xiàn)比flash要更好。3、網(wǎng)頁表現(xiàn)方面，HTML5中的CSS3特效樣式、Canvas、webgl的介入，不僅加強了網(wǎng)頁的視覺效果，甚至能夠使用戶在網(wǎng)頁當中看到三維立體特效。4、另外其跨平臺的特點，可以避免傳統(tǒng)移動終端上的Native App，開發(fā)者必須針對不同的操作系統(tǒng)進行研發(fā)工作的弊端，從時間和資金成本上講遠小于跨系統(tǒng)移植。而且html5的語言簡單，容易學(xué)習。現(xiàn)在國內(nèi)已經(jīng)出現(xiàn)一批html5頁面制作平臺，讓不懂編程的用戶也能自己制作。國內(nèi)制作html5頁面的平臺出名的有maka.im和vxplo，maka.im通過選擇模板，添加效果、圖文即可完成制作，vxplo界面類似于photoshop，個性化程度高，但是操作比較復(fù)雜。"

iPhone手機網(wǎng)頁的設(shè)計尺寸iPhone5尺寸是640x1136px分辨率是326PPI iPhone4和iPhone4S尺寸是640x960px分辨率是326PPI iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px分辨率是163PPI安卓網(wǎng)頁的設(shè)計尺寸320dp：一個普通的手機屏幕（240X320，320×480，480X800）480dp：一個中間平板電腦像（480×800）600dp：7寸平板電腦（600×1024）720dp：10寸平板電腦（720×1280，800×1280）ipad網(wǎng)頁的設(shè)計尺寸iPad第三代第四代尺寸是2048x1536px分辨率是264PPI iPad第一代第二代尺寸是1024x768px分辨率是132PPI iPad Mini尺寸是1024x768px分辨率是163PPI以上是移動端的尺寸，單獨的如果某一個移動的網(wǎng)站的尺寸是沒有的，因為移動網(wǎng)站的一半情況是按照%比的尺寸 來自動適應(yīng)屏幕的大小，或者也通過設(shè)置，iphone執(zhí)行什么尺寸，安卓情況執(zhí)行什么尺寸的。

在工具上，手機版網(wǎng)頁和電腦版網(wǎng)頁沒有什么區(qū)別，可以根據(jù)自己的喜好。我是喜歡用Dreamweaver的，而且Dreamweaver cs6有個多屏預(yù)覽的功能，可以很方便的預(yù)覽手機、平板、PC端的效果。不過Dreamweaver 挺大的，還有很多比較快比較好的編輯器，比如EditPlus，這還是看個人的習慣和喜好了。推薦一個編輯器sublime text，我自己覺得超好用。在代碼方面的話：首先得加上這樣的一行。設(shè)置寬度、高度、是否能夠縮放。<meta name="viewport" content="width=device-width,inital-scale=1.0,minimum-scale=0.5,maximum-scale=2.0,user-scalable=no">然后，主要是要考慮適配。比較好的是做到自適應(yīng)。這個可以搜一下，我記得月光博客里面就有篇很詳細的。其次，可以用@media only screen and(min-device-width : 320px) and(max-device-width : 480px){ }來對不同像素的屏幕寫不同的樣式?？梢钥聪轮醯牡卿涰撁妫玫木褪茾media。再然后要考慮的是用戶體驗。簡單的拿個鏈接來說，在PC端因為有鼠標，很容易點到?？墒鞘謾C端就不一樣，就幾個字的鏈接很難點到，所以就要擴大點的面積。這就是為什么會出現(xiàn)電腦版的網(wǎng)頁和手機版網(wǎng)頁。其實做手機版的網(wǎng)頁有個好處就是可以大量的使用HTML5和CSS3，這樣能做出很多效果。對于這些的話，看附件里面的學(xué)習方法有幫助的很抱歉，回答者上傳的附件已失效

dreamweaver能夠制作手機網(wǎng)頁的。其實和pc端的網(wǎng)頁差不多，只是不支持js代碼。然后網(wǎng)頁大小控制在400px左右。太大了不能完全展現(xiàn)。也可以設(shè)置為100%,按比例來做。這樣能手機整屏顯示 。1<meta name="viewport"content="width=device-width, initial-scale=1"/>添加一下這個代碼吧，表示你的網(wǎng)頁不能放大，只能按1：1顯示 不會因為放大顯示而，導(dǎo)致你的網(wǎng)頁錯位注意字體大小要稍微大一點。多用色塊來展現(xiàn)。這個是一個案例，只是一部分截圖。你可以多參考別人的設(shè)計