響應式WEB設計

近期在學習有關響應式設計的內容，對此作了些整理，圖片來源於網絡，附上本身作的簡單demo，沒有js，只用CSS作了簡單的搭建http://y.zhso.net/。

一、爲何須要響應式web設計

　　出於對人力物力財力的節省和對生活富有詩意的一種追求。

　　因爲目前移動設備的大量使用，以及PC顯示器的尺寸逐漸出現較大差異，傳統的web頁面已經不能知足多種設備的瀏覽效果，好比傳統頁面在大瀏覽器中會有較大的空白區域，而在小瀏覽器已經移動設備中，不能徹底顯示頁面，或是將頁面縮小至適應移動設備尺寸大小，不能正常瀏覽，對於點擊觸點也有影響，不少人會選擇放大頁面，在進行瀏覽，這樣整個頁面就須要不停的拖動，給用戶的體驗很差。

　　簡而言之，有以下幾點：

• 　　各類屏幕尺寸
• 　　各類操做系統
• 　　各類訪問設備
• 　　各類需求

二、什麼是響應式web設計

　　一個網站兼容多個終端。

• 　　一樣的代碼
• 　　經過設備適配
• 　　知足不一樣的訪問設備
• 　　能展示出不一樣的效果
• 　　始終內容優先
• 　　移動設備優先:不引人注目的js和逐漸加強
• 　　基於瀏覽器:特性活設備探測的逐漸加強

三、響應式設計的替代方案

　　開發針對網站的、徹底獨立的移動版本，開發移動應用APP。但這樣作也存在必定的不足：

• 　　開發獨立版本的網頁，能夠經過設備適配進行跳轉，須要維護多個頁面，對於首頁級別頁面適用，不適用於內容頁
• 　　開發移動應用，開發成本高，不利於搜索引擎收錄

四、響應式web設計的優點&不足

　　優點：

• 　　多終端視覺和操做體驗風格統一
• 　　開發、維護、運營成本低
• 　　不一樣設備間的兼容性強
• 　　操做靈活：響應式設計是針對頁面的，能夠只對必要的頁面部分進行改動
• 　　對用戶友好：用戶能夠與網站一直保持聯繫，好比URL不變
• 　　積累分享：經過單一的URL地址收集全部的社交分享連接
• 　　最佳化搜索引擎：能夠完成移動網站和桌面網站的鏈接
• 　　無重定向：包含無用戶代理定向

　　不足：

• 　　兼容性：低版本瀏覽器可能存在不兼容問題
• 　　移動帶寬流量：相比移動版定製網站，流量稍大
• 　　加載須要必定的時間：在響應式設計中，須要下載一些看起來並沒必要要的HTML、CSS。除此以外，圖片並無根據設備調整到合適大小，而這正式致使加載時間加倍的緣由
• 　　優化搜索引擎：對於響應式web設計，爲搜索引擎肯定關鍵字不是一件容易的事。所以相比通常的桌面用戶，移動用戶多采用不一樣的關鍵字，修改標題及其餘事項都比較困難
• 　　Google排名：若是響應式網站僅基於移動內容，它困難會影響到網站的Google排名。由於Google不支持這樣的網站，它不會對你的網站進行索引
• 　　時間花費：開發響應式網站是一項耗時的工做。若是你計劃把一個現有的網站轉化成響應式網站，可能耗時更多。若是你想要一個響應式網站，最好從草圖開始從新設計
• 　　佈局：響應式web設計的佈局主要是液態的，這也正是設計者對設計樣式很差控制的緣由。並且眼下正是設計者提早展現各類「複製品」的時候。設計者試圖針對移動和桌面佈局分別顯示線框和設計原型。只有等到這兩種佈局均獲得提升後，響應式web設計策略才能真正實現。

五、響應式與自適應的區別

　　響應式佈局：流體網絡

• 　　網頁的佈局改變
• 　　從新排布
• 　　更好的用戶體驗
• 　　測試難度大

　　自適應佈局：固定斷點

• 　　網頁的徹底縮放
• 　　實施代價低
• 　　測試容易
• 　　設計更加可控

六、移動終端屏顯元素

　　移動設備瀏覽器內核：Trident（IE）、Gecko（FF）、Presto（opera，已廢棄）、Webkit（Safari、chrome）、Blink（google）

　　移動設備的尺寸：iPhone（980），iPad（1024），Android（分辨率480*800狀況下，980），WinPhone（1024）等

　　移動設備的分辨率：

　　

　　

　　Viewport：經過Viewport把本身冒充成更寬的屏幕
　　<meta name=「viewport」 content=「width=device-width」>

七、響應式web設計流程

　　用戶研究與設備規格預估

　　

　　框架原型規劃&測試

　　

　　視覺設計：須要保證內容文字的可讀性、控件可點擊區域的面積等

　　

　　前端構建：與傳統的web開發相比，響應式設計的頁面因爲頁面佈局、內容尺寸發生了變化，因此最終的產出更有可能與設計稿出入較大，須要前端開發人員和設計師多溝通

　　

 

*Media Queries

• Max Width:可視區域的寬度小於某尺寸時被應用 @media screen and (max-width: 600px){}，也能夠經過link外部文件實現<link rel="stylesheet" media="screen and (max-width: 600px)" href="xxx.css">
• Min Width:可視區域的寬度大於某尺寸時被應用 @media screen and (min-width: 900px){}
• Multiple Media Queries:可視區域的寬度在600px和900px之間的時候被應用 @media screen and (min-width: 600px) and (max-width: 900px){}
• Device Width:在某尺寸的設備上被應用 @media screen and (max-device-width: 480px){}
• For iPhone 4:<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio:2)" href="iphone4.css">
• For iPad:可使用media query在iPad上檢測橫豎屏的方向,portrait（豎屏） or landscapse（橫屏）@media all and (orientation: portrait){}
• Media Queries for IE:IE8及如下版本不支持CSS3 Media Queries，能夠經過使用javascript來進行彌補

 

 

PS：Js框架Modernizr：http://www.modernizr.com ，用於向缺乏HTML5/CSS3特性支持的瀏覽器打補丁

　　http://www.html5cn.org/article-8610-1.html，該文章講述了10個響應式網頁製做技巧，感興趣的話能夠看看哦