什么是響應式設計？
響應式網(wǎng)站設計(Responsive Web design)的理念是：頁面的設計與開發(fā)應當根據(jù)用戶行為以及設備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調(diào)整。具體的實踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備；換句話說，頁面應該有能力去自動響應用戶的設備環(huán)境。響應式網(wǎng)頁設計就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這樣，我們就可以不必為不斷到來的新設備做專門的版本設計和開發(fā)了。
簡單來說就是：響應式設計是一種頁面設計布局，可以智能地根據(jù)用戶行為以及使用的設備環(huán)境進行相對應的布局。
（來自百度百科）
自適應與響應式布局的區(qū)別？
實現(xiàn)頁面設計布局的響應效果，除了響應式布局，自適應也是常用的一種技術。兩者時常被混淆。
我們來概括一下它們之間的區(qū)別：
自適應
為不同的設備提供不同的網(wǎng)頁，比如專門提供一個mobile版本，或者iPhone / iPad版本。這樣做固然保證了效果，但是比較麻煩，同時要維護好幾個版本，而且如果一個網(wǎng)站有多個portal（入口），會大大增加架構(gòu)設計的復雜度。
響應式
響應式網(wǎng)頁設計就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。不必為不斷到來的新設備做專門的版本設計和開發(fā)了。
響應式布局的優(yōu)勢？
提高用戶體驗
通過合理的設計方案配合規(guī)范的技術實現(xiàn)，使同一個頁面在不同設備，提高屏幕利用率，最大化操作效率，在不同分辨率屏幕上都能有最佳的用戶體驗。
降低開發(fā)成本
響應式的設計只需開發(fā)一套代碼，同時兼容多種尺寸的設備。不用同時維護好幾個版本內(nèi)容，只需維護一套代碼即可。
降低設計成本
設計師需和前端程序員緊密溝通，確定響應幾個寬度區(qū)間，以及對應的數(shù)值區(qū)間。根據(jù)響應式制定了一套能在多終端適配的設計方案，橫向拉通頁面以及容器布局的適配規(guī)則，一套設計規(guī)則能夠高效適配多終端。
提高業(yè)務迭代效率
業(yè)務方在迭代過程中，會考慮多終端不同的使用場景、業(yè)務特性，響應式能夠基于同一個客戶端、后臺和運營系統(tǒng)，一次運營多端同步生效，保障業(yè)務發(fā)展效率最大化。
響應式布局的設計要點？
設計師在做響應式設計時，不僅僅是單純的縮放頁面容器大小就可以了，需要有規(guī)律的進行設計，這樣能夠降低開發(fā)人員的開發(fā)成本，提高效率。并且需要在設計時，關注設計的界面，是否符合用戶的操作體驗，交互是否流暢，能不能在各個不同的終端給予用戶最佳的使用體驗。
響應式與柵格系統(tǒng)搭配使用
響應式設計的前提有兩點：頁面布局具有規(guī)律性；元素寬高可用百分比代替固定數(shù)值，而這兩點正是柵格系統(tǒng)本身就具有的典型特點，所以利用柵格系統(tǒng)進行響應式的設計高效快捷，搭配使用能夠提高設計與開發(fā)效率。
Ant Design為例：采用 24 柵格體系。以上下布局的結(jié)構(gòu)為例，對內(nèi)容區(qū)域進行 24 柵格的劃分設置，如下圖所示。為頁面中柵格的 Gutter 設定了定值，即瀏覽器在一定范圍擴大或縮小，柵格的 Column 寬度會隨之擴大或縮小，但 Gutter 的寬度值固定不變。
什么是斷點？
響應式頁面中的容器大小是動態(tài)的，我們可以提供給開發(fā)在不同的頁面寬度區(qū)間，對應的布局應該是怎么樣的。而這些區(qū)間的臨界點，就是“斷點”。
如何確定斷點？
進行響應式設計之前，與產(chǎn)品、前端開發(fā)人員共同商討出自身產(chǎn)品的常用設備類型及尺寸，敲定產(chǎn)品所需要覆蓋的設備類型，制定出幾個適合自身產(chǎn)品的斷點。
以Ant Design 為例：https://ant.design/components/layout-cn/ 感興趣的可以了解一下
為什么頁面寬度區(qū)間以最小的寬度設計？
設計師在進行設計的時候，考慮極限值，以最小的寬度來進行設計，能夠避免內(nèi)容展示不下的尷尬場景。
響應式布局的響應策略方案？
Ant Design 兩種較為典型的適配方案：
一、左右布局
常被用于左右布局的設計方案中，常見的做法是將左邊的導航欄固定，對右邊的工作區(qū)域進行動態(tài)縮放。
二、上下布局
常被用于上下布局的設計方案中，做法是對兩邊留白區(qū)域進行最小值的定義，當留白區(qū)域到達限定值之后再對中間的主內(nèi)容區(qū)域進行動態(tài)縮放。
這兩種非常簡單的適配的思路，一套完美的適配方案需要設計師根據(jù)交互、體驗、以及判斷頁面內(nèi)容的層級等來進行設計。
三、內(nèi)容增減
內(nèi)容增減：部分模塊在不同的內(nèi)容會有顯示和隱藏的狀態(tài)，網(wǎng)頁端的內(nèi)容在大屏幕上展示的內(nèi)容，在小屏幕場景中部分會被隱藏掉。
如下圖：大屏幕中banner區(qū)域展示的推薦列表，在小屏幕中被隱藏。
四、布局調(diào)整
布局調(diào)整。主要是模塊的排列和順序發(fā)生變化，常見的就是內(nèi)容的布局發(fā)生改變、模塊一行的列數(shù)發(fā)生改變。
如下圖：大屏與小屏幕中的banner的排列布局方式不同。
響應式設計如何交付？
設計界面需要符合前端開發(fā)人員編程的方法和需求，所以在設計過程中，需要與開發(fā)人員緊密溝通，并且輸出對應的設計頁面，作出標注，并且與開發(fā)人員溝通確定響應策略，而不是依靠口頭傳達。
在一些特殊的情況下，響應式的背景切圖會和普通頁面的背景切法不一樣，盡可能與前端開發(fā)人員溝通清楚需要導出的文件。
總結(jié)
響應式設計是一種源自技術的概念，需要設計師與開發(fā)人員緊密溝通，共同配合完成。
在寫本文之前，參考借鑒了很多文章，更加深入了解了響應式設計的設計原理，以上內(nèi)容，是對于響應式設計學習的一些復盤及心得，希望對大家有所幫助，如有不同意見，歡迎指正！