一、背景介紹

隨著智能手機的迅速發展，大眾群體使用手機訪問互聯網的頻率已經大大提升，手機的屏幕比較小，寬度通常在600像素以下；PC的屏幕寬度，一般都在1000像素以上（目前主流寬度是1366×768），有的還達到了2000像素。同樣的內容，要在大小迥異的屏幕上，都呈現出滿意的效果，並不是一件容易的事，傳統的只能在pc端顯示的網頁，如何適應這個潮流，也成了人們開始關注和解決的問題。於是響應式布局的概念就被提出來了。

二、什麼是響應式布局

響應式布局簡而言之，就是一個網站能夠兼容多個終端，而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用「大勢所趨」來形容也不為過。

三、響應式布局的優點

1、響應式設計可以向用戶提供友好的Web界面，同樣的布局，卻可以在不同的設備上有不同排版，這就是響應式最大的優點，現在技術發展日新月異，每天都會有新款智能手機推出。如果你擁有響應式Web設計，用戶可以與網站一直保持聯繫，而這也是基本的，也是響應式實現的初衷。

2、跨平台和終端且不需要分配子域名

3、面對不同解析度設備靈活性強

四、響應式布局的缺點

1、為了適配不同的設備，響應式設計需要大量專門為不同設備打造的css及js代碼，這導致文件增大，效率低下代碼累贅，會出現隱藏無用的元素，載入時間加長，影響頁面載入速度，其實這是一種折衷性質的設計解決方案，多方面因素影響而達不到最佳效果。

2、在響應式設計中，圖片、視頻等資源一般是統一載入的，這就導致在低解析度的機子上，實際載入了大於它的顯示要求的圖片或視頻，導致不必要的流量浪費，影響載入速度。

3、移動端和電腦端的很多交互組件差異比較大，例如：日期選擇控制項，電腦端更多的是彈出選擇控制項，移動端是picker選擇，響應式布局很難做到在不同平台使用不同的交互組件

4、電腦端的生態比較單一，一般只需要考慮各個瀏覽器兼容就行，但移動端的生態就比較豐富，移動端h5頁面，微信公眾號h5，小程序內h5，對各生態的api功能對接上，一套代碼里需要通過大量的代碼去判斷不同生態分別走不同的程序分支，這對於代碼的維護提出了極高的要求

五、適合做響應式布局的應用

內容型及資訊型網站，很適合響應式的布局，例如官方網站，新聞資訊網站，審批類網站，此類網站主要用於內容瀏覽及確認，用戶交互比較少，只需要根據不同屏幕尺寸調整頁面內容展示

六、不適合做響應式布局的應用

大型門戶、電商網站、後台管理應用不太適合響應式布局，因為響應式設計的基本原則是不會因設備不同而給予用戶不同的內容（比如在低分辯率設備上刪減某些內容），而這些網站的單頁內容非常多，當縮減到低解析度設備上，又要保證內容全部可瀏覽時，必然導致頁面拉長，瀏覽難度增加，所以很多大型門戶或電商網站都會提供一個移動設備版的網站，或者乾脆直接讓用戶縮放網頁進行瀏覽。為不同的設備提供優化的瀏覽體驗，這個肯定是網站開發所追求的目標，也是網站技術發展的趨勢。但響應式設計只是實現這一目標的其中一個手段，只適用於某些類型的網站，不可一概而論