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

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

響應式網(wǎng)頁設(shè)計是什么？

    響應式網(wǎng)頁設(shè)計，通常縮寫為RWD（Responsive Web Design）。

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

RWD實現(xiàn)的原理是什么？

    網(wǎng)頁的頁面由 1. APP bar、2. Navigation、3. Body 組成。

cr: Google material design

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

設(shè)計師如何設(shè)計RWD規(guī)則？

1、選定解析度

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

    該網(wǎng)站提供當今最常用的解析度的統(tǒng)計數(shù)據(jù)：

    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、設(shè)計節(jié)點和規(guī)則

    了解常用解析度之后，并不需要將所有常用尺寸都畫一遍，只需要根據(jù)業(yè)務需要來設(shè)計節(jié)點和規(guī)則即可：

     節(jié)點

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

     規(guī)則

    根據(jù)網(wǎng)頁的內(nèi)容，設(shè)置規(guī)則。例如頁面的邊距：

    設(shè)置固定邊距，中間的內(nèi)容隨屏幕尺寸變化而變化

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