移動互連網之響應式設計

　　在公司的做的關於“移動互連網之響應式設計”分享，以下簡要內容，記錄如下

　　1.移動互連網的現狀

　　2.Web App和Native App 之爭

　　Web App

　　優點

　　開發成本低，周期短

　　零部署，方便更新和升級

　　缺點

　　效能、使用者體驗受制於瀏覽器的實現

　　難以應用手機的進階功能，如照相、重力感應等

　　Native App

　　優點

　　能最大化挖掘效能潛力

　　能夠運用手機的所有開放特性

　　能夠不斷改善使用者體驗

　　缺點

　　平台差異大，開發難度大，成本高、周期長

　　讓使用者安裝用戶端是個不低的門檻(我不會為了看你的網站而下個App吧，)

　　解決辦法：[Hybird App] Web App 開發架構 JQTouch、jQuery Mobile 和PhoneGap(GeoLocation，Camera)

　　3.什麼是響應式設計(Responsive Web Design)?

　　簡單來說是由Ethan Marcotte在2010年提出的名詞，指可以自動識別螢幕寬度、並做出相應調整的網頁設計，也是為使用者體驗的考慮)

　　4.怎樣去響應式設計

　　我們最先想到的應該是寬度使用百分比%，如果只有這樣他並不能解決實際問題

　　首先

　　a .在頭部加一個viewport的標籤

　　width=device-width：當前網頁的寬度是使用者手機螢幕的寬度

　　initial-scale=1.0 ： 原始縮放比例，1表示不縮放

　　user-scalable=no : 禁止使用者縮放螢幕尺寸

　　b.media query(媒體查詢)

　　@media screen and (max-width: 320px) {

　　#fixedInput{

　　width:57%;

　　}

　　}

　　當瀏覽器的螢幕尺寸最大不超過320px，單獨執行的代碼

　　如果這樣的代碼比較多的話，可以這樣寫，選擇性載入CSS樣式

　　c.圖片的自適應

　　img{

　　max-width: 100%;

　　height: auto;

　　width: auto9; /* ie8 */

　　}

　　d.流動布局和定位

　　頁面中使用float浮動，這樣會隨著螢幕的大小浮動。

　　有時候使用定位position:abosulte;效果會更佳

　　5.響應式設計的不足

　　a.載入過多的資源，比如 自適應的圖片都比較大，小螢幕手機仍是載入同樣的圖片，浪費流量

　　b.增加開發成本 有的代碼至少寫兩遍 css的

　　c.不同螢幕的手機視覺體驗歸根到底還是有差別的

　　解決辦法：

　　技術上

　　使用離線儲存，緩衝不經常更新的資源比如js、css logo圖片等;

　　根據不同的螢幕載入不同尺寸的圖片

　　策划上

　　設計時是以手機介面為主，pc端為輔