什麽是響應式界面？

理論上，響應式界面能夠適應不同的設備。描述響應式界面最著名的一句話就是“Content is like water”。如果顯示器是一個容器，那麽所有要呈現的網頁內容就像水一樣。在方而法方，在圓而法圓。

為什麽要設計響應式界面？

即便是PC或Mac用戶，只有一半的人會將瀏覽器全屏顯示，而剩下的用多大的瀏覽器很難預知。臺式機、投影、電視、筆記本、手機、平板、手表、VR等職能設備正在不斷增加，主流設備的概念正在消失。屏幕分辨率正在飛速發展，同一張圖片在不同的設備上看起來大小差別很大。鼠標、觸屏、筆、攝像頭手勢等不可預期的操控方式正在不斷出現。

響應式界面的四個層次

1.同一頁面在不同大小和比例上看起來都應該是舒適的。

2.同一頁面在不同分辨率上看起來都應該是合理的；

3.同一頁面在不同的操作方式上體驗是統一的；

4.同一頁面在不同類型的設備上交互方式應該是符合習慣的。

響應式界面的基本規則

1.可伸縮的內容區塊：內容區塊的在一定程度上能夠自動調整，以確保填滿整個頁面。

2.可自由排布的內容區塊：當頁面尺寸變動較大時，能夠減少增加排布的列數。

3.適應頁面尺寸的邊距：到頁面尺寸發生更大變化時，區塊的邊距也應該變化。

4.能夠適應比例變化的圖片：對於常見的寬度調整，圖片在隱去兩側部分時，依舊保持美觀可用。

5.能夠自動隱藏/部分顯示的內容：如在電腦上顯示的大段描述文本，在手機上就只能少量顯示或全部隱藏。

6.能自動折疊的導航和菜單：展開還是收起， 應該根據頁面尺寸來判斷。

7.放棄使用像素作為尺寸單位：用dp尺寸等方法來確保頁面在分辨率相差很大的設備上，看起來也能保持一致。同時也要求圖片應該比預想的更大，才能適應高分辨率的屏幕。

3種響應式布局的設計方法

（1）中心定位，兩側自適應

將內容和視覺居中，而且把尺寸控制在1000px以內。左右兩側就放 一些輔助信息，讓他們根據屏幕寬度自適應即可。

（2）單側定位，中心延伸展開

將主要內容放在左側，這是由我們的閱讀習慣所決定的，然後右邊放一些輔助信息，中間這塊是自適應屏幕寬度內容。

（3）小切糕全屏響應式設計

小切糕全屏響應式設計算是瀑布流裏面的一種，是根據屏幕寬度進行計算，以一個較小的單元格為基礎，然後以2倍、3倍、4倍等方式進行拓展，並計算出最適合的完整組合。

現實中的布局往往由固定布局、流動布局、混合布局和響應式布局搭配使用：

1.向下兼容屏幕：960寬度以上元素保持不變，寬度縮小至一定值（如750）時響應

2.往下固定布局+響應式：960寬度以下保持不變，960寬度及以上元素根據分辨率變化改變布局。

3.“固定布局+流動布局”或“固定布局+混合布局”或“流動布局+響應式”。

可以參考的案例

1.enochs 鏈接：http://enochs.co.uk/

2.denisechandler 鏈接： http://www.denisechandler.com/

3.morehazards 鏈接：http://www.morehazards.com/

響應式布局的幾點關註