響應式佈局

所謂「響應式網頁設計(Responsive Web Design)」也就是自適應，就是能夠自動識別屏幕寬度、並作出相應調整的網頁設計。目前這種設計已經出如今愈來愈多的國內網站上，目前Google已經明確代表鼓勵響應式網頁設計。

一般在瀏覽網頁時，手機上和電腦上沒法顯示同一個網頁，這也致使許多網頁設計會自動轉到特定的連接上，如上圖所示，不管在PC端仍是移動端，網頁的顯示其實都是一個版本，會隨着屏幕的大小網頁而改變。

使用自適應網頁設計有5個好處：

1， 隨着移動設備愈來愈多，能夠提高用戶體驗。

2， 該設計沒有網頁版本區分，因此SEO的策略保持一致。

3， 能夠避免重複內容，專心維護這一個網頁。

4， 保持網頁的原有連接。

5， Google也建議優先採用響應式設計，由於不管是什麼網頁版本都是相同的HTML、相同的內容，Google最容易處理。

響應式網頁設計對SEO是友好的，這些相關技術還在不斷演化中，還有許多尚待客服的地方。

下面來講說它的缺陷：

1， 對老版本IE支持很差，這是一個致命的問題，尤爲是IE6，若是你的網站用戶大多還採用老版本的IE的話(建議在統計工具裏看一下)，就不適合作響應式網頁設計了。

其實我一直想採用響應式網頁設計。

2， 例如一些小遊戲站、視頻站，若是僅僅是網頁採用了響應式設計，但裏面的內容依然是隻能在PC端打開的話，這時候就要認真考慮了。

國外copyblogger的博客提到了一個很特別的案例，就是迪士尼公司的網頁。他說在迪士尼網頁中有許多給小朋友玩的網頁遊戲，有些遊戲能夠在桌上型電腦玩，可是若是使用移動設備就能夠沒法使用。所以這個狀況下，就必須作出抉擇，放棄使用Responsive Web Design，或是修改遊戲。

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

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

簡而言之，有以下幾點：

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

大屏幕：

 

 

 

中屏幕：

小屏幕：

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

開發針對網站的、徹底獨立的移動版本，開發移動應用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）等

移動設備的分辨率：