我們常常說：內容就像水，可適應于各種各樣的媒介。

    作為設計師，剛接觸多媒介的頁面設計時，很容易對內容如何在媒介與媒介之間流動無從下手、閱讀了大量的資料也很難抓住重點。所以今天我根據自己的實戰經驗，幫助大家理解和制作響應式網頁。

響應式網頁設計是什么？

    響應式網頁設計，通常縮寫為RWD（Responsive Web Design）。

    響應式網頁設計是一種網頁設計的技術，這種設計可使網站在不同的設備（從桌面電腦顯示器到移動電話或其他移動設備）上瀏覽時對應不同分辨率皆有適合的呈現，減少用戶進行縮放、平移和滾動等操作行為。

RWD實現的原理是什么？

    網頁的頁面由 1. APP bar、2. Navigation、3. Body 組成。

cr: Google material design

    當每個部分都有相應的響應規則時，就可以保證頁面的流動性。例如在保持在屏幕里的占比恒定、不同范圍內對應不同的恒定值。

設計師如何設計RWD規則？

1、選定解析度

    在設置規則之前，我們首先需要確定承載我們產品的大多是哪些載體，是移動手機？還是網頁？確定好主要載體之后，就可以選擇一些該載體的常見解析度做圖。

    該網站提供當今最常用的解析度的統計數據：

    pc端：1920*1080（21.7%）、1366*768（20.1%）、1536*864（9.7%）

    移動平板端：768*1024（43.6%)、1280*800（7.2%）、800*1280（5.7%）

    移動手機端：360*640（11.3%）、414*896（7.8%）；360*780（6%）

2、設計節點和規則

    了解常用解析度之后，并不需要將所有常用尺寸都畫一遍，只需要根據業務需要來設計節點和規則即可：

     節點

     有兩個比較重要節點：pc尺寸減小到移動平板尺寸的節點、移動平板尺寸減小到移動手機尺寸的節點。

     規則

    根據網頁的內容，設置規則。例如頁面的邊距：

    設置固定邊距，中間的內容隨屏幕尺寸變化而變化

     又或者設置內容在屏幕里的百分比，內容的布局大小隨屏幕尺寸的變化而變化