转自CSDNattilax的专栏 ：自适应网页设计 跟 响应式 设计的区别跟原理and实践总结...
響應式Web設計(Responsive?Web?design)的理念是：?1
#-----------自適應布局VS響應式布局?2
設計思路Mobile?First?2
#---手機and平板分辨率?3
#---------viewport...允許網頁寬度自動調整貝兒哪不個網頁縮小蘭..?3
#----------處理圖片縮放的方法?3
#----選擇加載CSS??Media?Queries 3
#=====3、布局寬度使用相對寬度(彈性布局) 4
#-----4、頁面使用相對字體?4
流動布局（fluid?grid）?流體布局，彈性布局 5
#----游戲網頁的特別的設計?5
#------移動端/桌面端內容自適應 5
#-------圖片背景的自適應?6
大尺寸圖片的響應式設計 6
混合使用自適應AWD?and?RWD?6
參考:?6
?
?
響應式Web設計(Responsive?Web?design)的理念是：
頁面的設計與開發(fā)應當根據用戶行為以及設備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方?面組成，包括彈性網格和布局、圖片、CSS?media?query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備；換句話說，?頁面應該有能力去自動響應用戶的設備環(huán)境。響應式網頁設計就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這樣，我們就可以不必為不?斷到來的新設備做專門的版本設計和開發(fā)了。
2010年，Ethan?Marcotte提出了“Responsive?Web?Design”這個名詞，指可以自動識別屏幕寬度、并做出相應調整的網頁設計。使網站的頁面布局能夠根據不同設備和分辨率進行自動調整。
?
作者?老哇的爪子?Attilax?艾龍，??EMAIL:1466519819@qq.com
轉載請注明來源：?http://blog.csdn.net/attilax
#-----------自適應布局VS響應式布局
?
問：“什么樣的網站/項目適合使用自適應布局（固定斷點）？什么樣的網站適合響應式布局？（流體網格）”
?
答：理論上來說，響應式布局在任何情況下都比自適應布局好一些，但在某些情況下自適應布局更切實際。
?
自適應布局可以讓你的設計更加可控，因為你只需要考慮了了幾種狀態(tài)就萬事大吉了。但在響應式布局中你可能需要面對非常多狀態(tài)——是的，大部分狀態(tài)之間的區(qū)別很小，但它們又的確是不同的——這樣一來就很難確切搞清你的設計會是什么樣。同時這也帶來了測試上的難題，你很難有絕對的把握預測到它會怎樣。換個角度說，這也是響應式布局的魅力所在。通過允許表面上的不確定因素存在，你可以獲得更高層次上的確定。雖然你無法在精確到像素級別準確預知你的設計如何在943px×684px視覺區(qū)域匯中展示，但你能確定的是它們一定能展示的很好——不管是表層特征還是布局結構都有條不紊。
?
??自適應布局有它自己的優(yōu)勢，因為它們實施起來代價更低，測試更容易，這往往讓他們成為更切實際的解決方案。自適應布局可以看做響應式布局的“窮兄弟”，在資源有限的情況下就可以讓它出馬。特別是改進現(xiàn)有網站的時候尤其奏效，因為全部重寫代碼在這時并不可行。這種案例中，采用自適應布局是一個不錯的出發(fā)點。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等），網頁側欄隱藏中部內容欄寬度自動調節(jié)。以下代碼針對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）?流體布局，彈性布局
"流動布局"的含義是，各個區(qū)塊的位置都是浮動的，不是固定不變的。
.main?{
float:?right;
width:?70%;?
}
.leftBar?{
float:?left;
width:?25%;
}
float的好處是，如果寬度太小，放不下兩個元素，后面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現(xiàn)。
另外，絕對定位（position:?absolute）的使用，也要非常小心。
?
#----游戲網頁的特別的設計
游戲網頁因為必須顯示在第一個屏上,所以,普通的自適應設計需要有些更改..
?
假如游戲為了縱向設計,??假如平板旋轉,要是還是100%寬度顯示,走游戲不能顯示滿的第一的屏...這樣,就要使用jquery?獲得屏幕寬度,要是縱橫比,不是縱向的,就要限制一個最大寬度,可以顯示第一的屏..
?
#------移動端/桌面端內容自適應
在服務器端操作?HTML?內容（比如為移動端減少內容，為桌面端提供更多內容）
許多的框架能實現(xiàn)這個.貝兒就要使用js/后臺語言判斷來實現(xiàn)..
?
值得收藏的14款響應式前端開發(fā)框架-CSDN.NET.htm
#-------圖片背景的自適應
使用css3???or??使用一個zindex=-5的圖片,width?100%
?
?
大尺寸圖片的響應式設計
?
Filament組提出了另外一種技術不僅是正確地設置圖像的尺寸，在較小的設備中為了節(jié)約空間，還降低圖像的分辨率，加載時間和移動寬帶（流量）。
這種技術需要一些文件，這些文件都在Github:一個JavaScript文件（rwd-images.js），Htaccess文件，和一張圖片（rew.gif），然后，在HTML代碼中，我們引用兩種圖片:一個小的“R”前綴，必須適應(“響應”)和大的data-fullsrc(HTML5啟用的一個屬性,更多詳情可以訪問這個頁面)。
實現(xiàn)這種技術，看起來如下：
img?<img?src="smallRes.jpg"?data-fullsrc="largeRes.jpg">
?
當屏幕尺寸大于480px，頁面就去加載大圖片（largeRes.jpg）。JavaScript插入元素是可以允許頁面分離適應的圖片。當頁面?加載完成，除了大或者小圖片會根據預先的設置來加載之外，所有文件都會正常的加載下來。如果這技術不起作用，所有的（大的和小的）圖片都被加載下來，這樣?就會浪費寬帶，反過來說，這技術防止了不必要的圖片加載下來，另外它是兼容現(xiàn)代瀏覽器（包括IE8）和移動設備的。
?
混合使用自適應AWD?and?RWD
?參考:
網頁自適應的實現(xiàn)方法(網頁分辨率不同以及手機和電腦網頁的切換)_移動互聯(lián)網開發(fā)_百度空間.htm
譯文：自適應布局VS響應式布局以及最佳表單字段標簽_Ryanwang_新浪博客.htm
手機web——自適應網頁設計（html_css控制）_唐老鴨光光_百度空間.htm
自適應響應式設計?w3coo_CSS3-w3coo.htm
轉載于:https://www.cnblogs.com/qilinge/p/4972859.html
《新程序員》：云原生和全面數(shù)字化實踐50位技術專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的转自CSDNattilax的专栏 ：自适应网页设计 跟 响应式 设计的区别跟原理and实践总结...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 通过判断浏览器的userAgent，用正
- 下一篇： 熟悉HTML CSS布局模型