轉自CSDNattilax的專欄：自適應網頁設計跟響應式設計的區別跟原理and實踐總結

頁面的設計與開發應當根據用戶行爲以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和佈局、圖片、CSS media query的使用等。不管用戶正在使用筆記本仍是iPad，咱們的頁面都應該可以自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不一樣設備；換句話說，頁面應該有能力去自動響應用戶的設備環境。響應式網頁設計就是一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。這樣，咱們就能夠沒必要爲不斷到來的新設備作專門的版本設計和開發了。

2010年，Ethan Marcotte提出了「Responsive Web Design」這個名詞，指能夠自動識別屏幕寬度、並作出相應調整的網頁設計。使網站的頁面佈局可以根據不一樣設備和分辨率進行自動調整。

做者老哇的爪子 Attilax 艾龍， EMAIL:1466519819@qq.com
轉載請註明來源： http://blog.csdn.net/attilax

#-----------自適應佈局VS響應式佈局

問：「什麼樣的網站/項目適合使用自適應佈局（固定斷點）？什麼樣的網站適合響應式佈局？（流體網格）」

答：理論上來講，響應式佈局在任何狀況下都比自適應佈局好一些，但在某些狀況下自適應佈局更切實際。

自適應佈局可讓你的設計更加可控，由於你只須要考慮了了幾種狀態就萬事大吉了。但在響應式佈局中你可能須要面對很是多狀態——是的，大部分狀態之間的區別很小，但它們又的確是不一樣的——這樣一來就很難確切搞清你的設計會是什麼樣。同時這也帶來了測試上的難題，你很難有絕對的把握預測到它會怎樣。換個角度說，這也是響應式佈局的魅力所在。經過容許表面上的不肯定因素存在，你能夠得到更高層次上的肯定。雖然你沒法在精確到像素級別準確預知你的設計如何在943px×684px視覺區域匯中展現，但你能肯定的是它們必定能展現的很好——不論是表層特徵仍是佈局結構都有條不紊。

自適應佈局有它本身的優點，由於它們實施起來代價更低，測試更容易，這每每讓他們成爲更切實際的解決方案。自適應佈局能夠看作響應式佈局的「窮兄弟」，在資源有限的狀況下就可讓它出馬。特別是改進現有網站的時候尤爲奏效，由於所有重寫代碼在這時並不可行。這種案例中，採用自適應佈局是一個不錯的出發點。Dan Cederholm 在他的文章《Adapted》中也曾說過，這種辦法是可行的。

responsive-screens

設計思路Mobile First

Mobile First（從移動端開始，RWD ）：
一切從最小屏幕的手機端開始（好比 iPhone 的 320px ），先肯定內容，而後逐級往大屏幕設計。
不一樣於原來網頁設計，老是從桌面電腦的 1024px 開始的。

#---手機and平板分辨率

手機正常的2.8 --3.5--4.5 分辨率是320*480

平板好像是600*840

#---------viewport...容許網頁寬度自動調整貝兒哪不個網頁縮小蘭..

下面的視圖標籤告訴瀏覽器，使用設備的寬度做爲視圖寬度並禁止初始的縮放。在<head>標籤里加入這個meta標籤

#----------處理圖片縮放的方法

簡單的解決方法可使用百分比，但這樣不友好，會放大或者縮小圖片。那麼能夠嘗試給圖片指定的最大寬度爲百分比。假如圖片超過了，就縮小。假如圖片小了，就原尺寸輸出。

img { width: auto; max-width: 100%; }

#----選擇加載CSS Media Queries

自適應網頁設計"的核心，就是CSS3引入的Media Query模塊。
它的意思就是，自動探測屏幕寬度，而後加載相應的CSS文件。

Media Queries 是響應式設計的核心。

它根據條件告訴瀏覽器如何爲指定視圖寬度渲染頁面。假如一個終端的分辨率小於 980px，那麼能夠這樣寫

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

#head { … }

#content { … }

#footer { … }

}

例如使用以下的代碼，可讓屏幕寬度低於480像素的設備（如iPhone等），網頁側欄隱藏中部內容欄寬度自動調節。如下代碼針對Z-Blog，WordPress相關css樣式的id標籤名稱只需修改一下便可。

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

#divMain{

float: none;

width:auto;

}

#divSidebar {

display:none;

}

#=====三、佈局寬度使用相對寬度(彈性佈局)

因爲網頁會根據屏幕寬度調整佈局，因此不能使用絕對寬度的佈局，也不能使用具備絕對寬度的元素。這一條很是重要。

網頁整體框架可使用絕對寬度，但往下的內容框架、側欄等最好使用相對寬度，這樣針對不一樣分辨率進行修改就方便。固然也能夠不用相對寬度，那就須要在 @media screen and (max-device-width: 480px) 裏面增長各個div的針對小屏幕的寬度，實際上更麻煩。

#-----四、頁面使用相對字體

在HTML頁面上不要使用絕對字體（px），而要使用相對字體（em），二者換算關係是：em = px*16 ，例如16px就等於1em。

總之，根據上面四步進行修改的話，能夠很簡單地將一個網站修改成適合多種設備瀏覽的頁面，這對於經過手機訪問網站的用戶來講，的確是一件好事。

流動佈局（fluid grid）流體佈局，彈性佈局

"流動佈局"的含義是，各個區塊的位置都是浮動的，不是固定不變的。
　　.main {
　　　　float: right;
　　　　width: 70%;
　　}
　　.leftBar {
　　　　float: left;
　　　　width: 25%;
　　}
float的好處是，若是寬度過小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現。
另外，絕對定位（position: absolute）的使用，也要很是當心。

#----遊戲網頁的特別的設計

遊戲網頁由於必須顯示在第一個屏上,因此,普通的自適應設計須要有些更改..

假如遊戲爲了縱向設計, 假如平板旋轉,要是仍是100%寬度顯示,走遊戲不能顯示滿的第一的屏...這樣,就要使用jquery 得到屏幕寬度,要是縱橫比,不是縱向的,就要限制一個最大寬度,能夠顯示第一的屏..

#------移動端/桌面端內容自適應

在服務器端操做 HTML 內容（好比爲移動端減小內容，爲桌面端提供更多內容）

許多的框架能實現這個.貝兒就要使用js/後臺語言判斷來實現..

值得收藏的14款響應式前端開發框架-CSDN.NET.htm

#-------圖片背景的自適應

使用css3 or 使用一個zindex=-5的圖片,width 100%

大尺寸圖片的響應式設計

Filament組提出了另一種技術不只是正確地設置圖像的尺寸，在較小的設備中爲了節約空間，還下降圖像的分辨率，加載時間和移動寬帶（流量）。

這種技術須要一些文件，這些文件都在Github:一個JavaScript文件（rwd-images.js），Htaccess文件，和一張圖片（rew.gif），而後，在HTML代碼中，咱們引用兩種圖片:一個小的「R」前綴，必須適應(「響應」)和大的data-fullsrc(HTML5啓用的一個屬性,更多詳情能夠訪問這個頁面)。

實現這種技術，看起來以下：

img <img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

當屏幕尺寸大於480px，頁面就去加載大圖片（largeRes.jpg）。JavaScript插入元素是能夠容許頁面分離適應的圖片。當頁面加載完成，除了大或者小圖片會根據預先的設置來加載以外，全部文件都會正常的加載下來。若是這技術不起做用，全部的（大的和小的）圖片都被加載下來，這樣就會浪費寬帶，反過來講，這技術防止了沒必要要的圖片加載下來，另外它是兼容現代瀏覽器（包括IE8）和移動設備的。