響應式佈局的幾點關注

什麼是響應式界面？

理論上，響應式界面可以適應不一樣的設備。描述響應式界面最著名的一句話就是「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/