版權宣告：本文為博主原創文章，未經博主允許不得轉載。
paip.自適應網頁設計 跟 響應式 設計的區別跟原理and實踐總結
響應式Web設計(Responsive Web design)的理念是： 1
#---------viewport...允許網頁寬度自動調整貝兒哪不個網頁縮小蘭.. 3
響應式Web設計(Responsive Web design)的理念是：
頁面的設計與開發應當根據使用者行為以及裝置環境(系統平臺、螢幕尺寸、螢幕定向等)進行相應的響應和調整。具體的實踐方式由多方 面組成，包括彈性網格和佈局、圖片、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標籤
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
#----------處理圖片縮放的方法
簡單的解決方法可以使用百分比，但這樣不友好，會放大或者縮小圖片。那麼可以嘗試給圖片指定的最大寬度為百分比。假如圖片超過了，就縮小。假如圖片小了，就原尺寸輸出。
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;
}
}
#=====3、佈局寬度使用相對寬度(彈性佈局)
由於網頁會根據螢幕寬度調整佈局，所以不能使用絕對寬度的佈局，也不能使用具有絕對寬度的元素。這一條非常重要。
網頁總體框架可以使用絕對寬度，但往下的內容框架、側欄等最好使用相對寬度，這樣針對不同解析度進行修改就方便。當然也可以不用相對寬度，那就需要在 @media screen and (max-device-width: 480px) 裡面增加各個div的針對小螢幕的寬度，實際上更麻煩。
#-----4、頁面使用相對字型
在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）和移動裝置的。
混合使用自適應AWD and RWD
參考:
網頁自適應的實現方法(網頁解析度不同以及手機和電腦網頁的切換)_移動網際網路開發_百度空間.htm
譯文：自適應佈局VS響應式佈局以及最佳表單欄位標籤_Ryanwang_新浪部落格.htm
手機web——自適應網頁設計（html_css控制）_唐老鴨光光_百度空間.htm
自適應響應式設計 w3coo_CSS3-w3coo.htm