移動互聯網之響應式設計

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

　　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端為輔