先給大家體驗一下響應式和自適應的區別，請放大縮小一下屏幕嘗試
自適應的體驗http://m.ctrip.com/html5/
響應式的體驗 http://segmentfault.com/
通俗的說,
自適應布局是是為了解決如何才能在不同大小的設備上呈現同樣的網頁;它的缺點是當屏幕縮放過小時,雖然能顯示但太過擁擠/不能夠自動適應調整網頁的布局!
響應式布局就是為了解決它的缺點而來的, 可以根據屏幕的縮放,不僅可以自動適應,還能自動調整頁面的布局,使頁面更加的美觀;它可以自動識別屏幕寬度、並做出相應調整的網頁設計，布局和展示的內容可能會有所變動! 比如一行中顯示6個圖片,當調整寬度為之前的50%時,就會變成一行三個(栗子舉得有點爛........)
上圖吧:
簡單提下優雅降級和漸進增強吧:
優雅降級:一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。 (出現在前).面向高版本瀏覽器
漸進增強:針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。比較主流,分辨率越高用戶體驗越好;
下面說下響應式實現具體實現吧(暫時不考慮低版本IE兼容)
1.允許網頁寬度自動調整
<meta name="viewport" content="width=device-width, initial-scale=1" />
2.盡量少使用絕對寬度px
rem:可以設置字體和元素大小; 相對於根元素來說
em:設置字體大小; 相對於父級元素
百分比:
width:auto
3.圖片視頻自適應
img, object { max-width: 100%;}
4.或者可以引入寫好的庫:
像移動端布局 flexble.js
5.一些UI框架自帶的響應式方法:
像element-ui
最后,個人感覺響應式布局主要是用來做手機端和PC端不同終端兼容適配的; 如果只是在不同電腦分辨率或窗口大小適配,自適應應該就可以解決了(例如后台管理系統的自適應寬高).
參考原文: https://my.oschina.net/liu-xuewei/blog/345580