什么是響應式設計？

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

簡單來說就是：響應式設計是一種頁面設計布局，可以智能地根據用戶行為以及使用的設備環境進行相對應的布局。

（來自百度百科）

自適應與響應式布局的區別？

實現頁面設計布局的響應效果，除了響應式布局，自適應也是常用的一種技術。兩者時常被混淆。

我們來概括一下它們之間的區別：

自適應

為不同的設備提供不同的網頁，比如專門提供一個mobile版本，或者iPhone / iPad版本。這樣做固然保證了效果，但是比較麻煩，同時要維護好幾個版本，而且如果一個網站有多個portal（入口），會大大增加架構設計的復雜度。

響應式

響應式網頁設計就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。不必為不斷到來的新設備做專門的版本設計和開發了。

響應式布局的優勢？

提高用戶體驗

通過合理的設計方案配合規范的技術實現，使同一個頁面在不同設備，提高屏幕利用率，最大化操作效率，在不同分辨率屏幕上都能有最佳的用戶體驗。

降低開發成本

響應式的設計只需開發一套代碼，同時兼容多種尺寸的設備。不用同時維護好幾個版本內容，只需維護一套代碼即可。

降低設計成本

設計師需和前端程序員緊密溝通，確定響應幾個寬度區間，以及對應的數值區間。根據響應式制定了一套能在多終端適配的設計方案，橫向拉通頁面以及容器布局的適配規則，一套設計規則能夠高效適配多終端。

提高業務迭代效率

業務方在迭代過程中，會考慮多終端不同的使用場景、業務特性，響應式能夠基于同一個客戶端、后臺和運營系統，一次運營多端同步生效，保障業務發展效率最大化。

響應式布局的設計要點？

設計師在做響應式設計時，不僅僅是單純的縮放頁面容器大小就可以了，需要有規律的進行設計，這樣能夠降低開發人員的開發成本，提高效率。并且需要在設計時，關注設計的界面，是否符合用戶的操作體驗，交互是否流暢，能不能在各個不同的終端給予用戶最佳的使用體驗。

響應式與柵格系統搭配使用

響應式設計的前提有兩點：頁面布局具有規律性；元素寬高可用百分比代替固定數值，而這兩點正是柵格系統本身就具有的典型特點，所以利用柵格系統進行響應式的設計高效快捷，搭配使用能夠提高設計與開發效率。

Ant Design為例：采用 24 柵格體系。以上下布局的結構為例，對內容區域進行 24 柵格的劃分設置，如下圖所示。為頁面中柵格的 Gutter 設定了定值，即瀏覽器在一定范圍擴大或縮小，柵格的 Column 寬度會隨之擴大或縮小，但 Gutter 的寬度值固定不變。

什么是斷點？

響應式頁面中的容器大小是動態的，我們可以提供給開發在不同的頁面寬度區間，對應的布局應該是怎么樣的。而這些區間的臨界點，就是“斷點”。

如何確定斷點？

進行響應式設計之前，與產品、前端開發人員共同商討出自身產品的常用設備類型及尺寸，敲定產品所需要覆蓋的設備類型，制定出幾個適合自身產品的斷點。

以Ant Design 為例：https://ant.design/components/layout-cn/  感興趣的可以了解一下

為什么頁面寬度區間以最小的寬度設計？

設計師在進行設計的時候，考慮極限值，以最小的寬度來進行設計，能夠避免內容展示不下的尷尬場景。

響應式布局的響應策略方案？

Ant Design 兩種較為典型的適配方案：

一、左右布局

常被用于左右布局的設計方案中，常見的做法是將左邊的導航欄固定，對右邊的工作區域進行動態縮放。

二、上下布局

常被用于上下布局的設計方案中，做法是對兩邊留白區域進行最小值的定義，當留白區域到達限定值之后再對中間的主內容區域進行動態縮放。

這兩種非常簡單的適配的思路，一套完美的適配方案需要設計師根據交互、體驗、以及判斷頁面內容的層級等來進行設計。

三、內容增減

內容增減：部分模塊在不同的內容會有顯示和隱藏的狀態，網頁端的內容在大屏幕上展示的內容，在小屏幕場景中部分會被隱藏掉。

如下圖：大屏幕中banner區域展示的推薦列表，在小屏幕中被隱藏。

四、布局調整

布局調整。主要是模塊的排列和順序發生變化，常見的就是內容的布局發生改變、模塊一行的列數發生改變。

如下圖：大屏與小屏幕中的banner的排列布局方式不同。

響應式設計如何交付？

設計界面需要符合前端開發人員編程的方法和需求，所以在設計過程中，需要與開發人員緊密溝通，并且輸出對應的設計頁面，作出標注，并且與開發人員溝通確定響應策略，而不是依靠口頭傳達。

在一些特殊的情況下，響應式的背景切圖會和普通頁面的背景切法不一樣，盡可能與前端開發人員溝通清楚需要導出的文件。

總結

響應式設計是一種源自技術的概念，需要設計師與開發人員緊密溝通，共同配合完成。

在寫本文之前，參考借鑒了很多文章，更加深入了解了響應式設計的設計原理，以上內容，是對于響應式設計學習的一些復盤及心得，希望對大家有所幫助，如有不同意見，歡迎指正！