移動端Web開發

摘要：

　　主要介紹移動端Web開發須要注意的要點，以及一些基礎知識，如手機尺寸，手機瀏覽器，設計理念。

目錄：

　　分辨率

　　手機瀏覽器

　　設計理念(3S原則)

　　響應式Web開發

 

　　移動端開發的水很深啊，下面就上面目錄這幾項提及吧。

分辨率

　　手機分辨率要比PC分辨率龐雜的多，各類尺寸，各類比例。主要考慮一下兩個方向

　　1）主流分辨率。經調研發現，目前主流手機分享率爲：240*320像素，320*480像素，480*800像素（居多），640*960像素（居多），480*854(9:16)像素（少），1280*720像素（多），1280*800像素，1920*1080。這個我想最好有數據分析部分來看。

　　2）目標羣所持設備分辨率。 經過本身網站的統計代碼統計獲得的結果。這個比1更重要，決定了你將作的產品如何設計。

     視網膜屏幕的評定標準是分辨率超過300ppi。

　　由視網膜屏幕又帶來一個新的概念：「設備像素」。有關這方面的研究，見《視網膜New iPad與普通分辨率iPad頁面的兼容處理》。

手機瀏覽器

    國內手機瀏覽器，主流有UC瀏覽器，QQ瀏覽器，海豚瀏覽器，百度瀏覽器等都是基於Webkit內核，對HTML5&CSS3支持都很好，因此大膽的使用吧。

設計原則（3s）原則

  Simple、Small、Speedy.《Mobile Web Design: Best Practices》。

 Speedy實際上是Simple, Small的結果。頁面簡單，代碼小，天然速度就快起來了。

  Web設計方面，簡約風格：便捷的操做、清爽的界面、友好的提示、少而小的圖片、精簡的代碼等，當作到了這些，相信網站會變得Speedy。

    移動web開發應該把手機的固有特性優先考慮。首先，手機屏幕相比桌面屏幕很小，因此滿屏可顯示的內容很少，這就要求咱們在頁面設計的時候選擇好適當的字號，還得考慮文檔內容的優先次序，把重要內容靠前顯示；其次，手機的交互方式讓咱們得去從新考慮頁面元素的設計。桌面web以鼠標操做爲主，這樣可操做的範圍很精確，移動web以觸控操做爲主，手指的操做範圍比較寬泛，反映在頁面上，我以按鈕爲例，對於小屏幕低分辨率的手機來講，能夠把按鈕設置爲.button{display:block;}，而對於大屏幕高分辨率的手機，能夠設置爲.button{display:inline-block;}，這是按鈕。對於連接列表，要設置適當的行高，避免可點擊的範圍過小而操做失誤；最後，圖片。手機開發應儘可能避免圖片的使用，像圓角、陰影、漸變等之前在桌面很差實現的狀況，在手機開發上已經不存在了，徹底能夠採用css3來實現，因此設計師在設計psd效果圖的時候，就把效果作出來，但切圖的時候就沒必要給出。

 響應式設計

見個人另外一篇文章 【media-queries】媒體查詢，爲了響應式設計而生