讓用戶在不同設備和尺寸的屏幕下看的頁面顯示效果更佳，屏幕空間利用更高，操作體驗更統一，交互方式更符合習慣。本文主要圍繞什麼是響應式，如何搭建響應系統，響應式網站解析 三個部分進行闡述，在項目中提前定義好響應系統將有助於設計師在設計中考慮頁面在不屏幕斷點上佈局，希望對正在瞭解響應式知識的你有幫助！！！
1. 什麼是響應式
馬科特說，真正的響應式設計方法不僅僅是根據可視區域大小而改變網頁佈局，而是要從整體上顛覆當前網頁的設計方法，是針對任意設備的網頁內容進行完美佈局的一種顯示機制。也就通過 CSS3’s 的媒體查詢識別當前屏幕寬度，在根據預設的屏幕斷點比對展示相應的頁面結構佈局、版式設計以及不同數量信息的展示。
1.1 相對尺寸單位-Rem
在《菜鳥教程》中是這樣描述的，使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。使用 Rem 的主要目的：方便計算尺寸、在不同寬度的設備上等比縮放內容。
1.2 屏幕斷點
屏幕斷點是響應式設計的基礎依據，它決定了我們要適配到什麼樣的設備或屏幕規格，並通過“媒體查詢”這樣的技術實現不同 “屏幕斷點” 條件下的不同 UI 表現。一般情況屏幕斷點都是手機、平板、PC這三個維度設計。下圖屏幕斷點參考 《Bootstrap入門:容器、響應式斷點、Z-index – 菜鳥學院》劃分。
1.3 流體柵格
在《「交互規範」柵格系統讓頁面元素間距更統一》中有詳細的介紹柵格系統及如何搭建，而流體柵格的核心思想是在較小的屏幕上降低柵格數量，以保證頁面元素各個屏幕下顯示效果。
2. 如何搭建響應系統
2.1 確定策略
響應策略主要是列數量、槽寬度、頁邊距的寬度、導航欄根據窗口的寬度而發生變化。屏幕斷點之間的頁面佈局，採用向下兼容的適配方式，576-767範圍的屏幕寬度用屏幕斷點576的設計佈局去響應。
以《「交互規範」柵格系統讓頁面元素間距更統一》模塊佈局中 “全屏”為例，響應策略如下圖（具體策略以各自項目實際情況為準）。
以《「交互規範」柵格系統讓頁面元素間距更統一》模塊佈局“在屏幕垂直中間選擇合適的區域”為例，響應策略如下圖（具體策略以各自項目實際情況為準）。
2.2 確定規則
2.2.1 屏幕斷點上響應
頁面佈局只允許在屏幕寬度縮放到屏幕斷點時發生變化，去響應下一個斷點範圍，屏幕斷點上常見的響應規則有刪除、堆疊、變更三種。
2.2.2 屏幕斷點內響應
屏幕斷點之間頁面佈局需要完全一致，不允許發生任何變化。屏幕斷點內常見的響應規則有定高拉伸、等比例縮放、無刪減拉伸三種。
2.2.3 Hover 動作兼容
在PC的交互方式主要鼠標和鍵盤，鼠標指針移入元素上面會出現樣式上變化、展示更多的信息、產生浮層等多種情況，但平板和手機上的交互方式主要是手指，不會出現出現 PC特有的 hover 動作。
3. 響應式網站解析
3.1 微信讀書
在瀏覽器屏幕寬度為721時，截取了 “微信讀書” 頁面進行了柵格還原；同時發現瀏覽器屏幕寬度的值分別是 560、720、960、1331 頁面佈局發生變化，根據屏幕斷點之間的頁面佈局，採用向下兼容的適配方式，微信讀書屏幕斷點可以劃分為320、560、721、961、1332，響應策略如下圖：
3.2 愛彼迎
在瀏覽器屏幕寬度為744時，截取了 “愛彼迎” 頁面進行了柵格還原；同時發現瀏覽器屏幕寬度的值分別是 743、1127 頁面佈局發生變化，根據屏幕斷點之間的頁面佈局，採用向下兼容的適配方式，微信讀書屏幕斷點可以劃分為320、744、1128，響應策略如下圖：
3.3 Ant Design Pro
在瀏覽器屏幕寬度為768時，截取了 “Ant design Pro” 頁面進行了柵格還原；同時發現瀏覽器屏幕寬度的值分別是 575、767、991 頁面佈局發生變化，根據屏幕斷點之間的頁面佈局，採用向下兼容的適配方式，Ant design Pro 屏幕斷點可以劃分為320、576、768、992、1200，響應策略如下圖：
「思考，優設網屬於響應式嗎？」
在瀏覽器屏幕寬度為768時，截取了 “優設網” 頁面進行了柵格還原；同時發現瀏覽器屏幕寬度的值分別是 575、767、991 頁面佈局發生變化，根據屏幕斷點之間的頁面佈局，採用向下兼容的適配方式，優設網 屏幕斷點可以劃分為320、576、768、992、1200，響應策略如下圖：
總結
在項目中，提前定義好響應系統，確定了屏幕斷點尺寸，設計師在設計中將會考慮的更全面，也為用戶在不同設備和尺寸的屏幕下看的頁面顯示效果更佳，操作體驗更統一打下了基礎。根據不同的業務場景響應系統也不盡相同，合適自己項目的響應系統才是好響應系統。
佈局涉及的《交互規範：系統佈局讓頁面模塊更統一》、《「交互規範」柵格系統讓頁面元素間距更統一》、《響應式》到此已經全部分享完畢，希望對正在設計 0-1 項目的你有所幫助！！！
本文由 @前行的大熊 原創發佈於人人都是產品經理，未經作者許可，禁止轉載。
題圖來自 Unsplash，基於 CC0 協議