網頁設計 water com 文章 tar 屏幕分辨率 優點 light gin

本篇文章主要解決：什麽是響應式布局？有什麽優點和缺點？

一 什麽是響應式布局？

伊桑·馬科特（Ethan Marcotte）在2010年首先提出了響應式網頁設計（RWD,Responsive Web Design）這個術語。在他的一篇文章《Responsive Web Design · An A List Apart Article》中他將已有的三種發開技巧（彈性圖片，彈性網格布局，媒體與媒體查詢） 進行了整合，命名為響應式網頁設計。

簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。

這個概念是為解決移動互聯網瀏覽而誕生的。由於移動互聯網的不斷興起，越來越多的用戶更青睞於一個可以在不同設備上給訪客提供一致瀏覽體驗的網站，而響應式設計正好可以做到這一點。

響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用“大勢所趨”來形容也不為過。隨著越來越多的設計師采用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。

響應式最大的特征就是網頁可以自動切換屏幕分辨率、圖片尺寸及相關的腳本功能，以完美適應不同尺寸的設備，也就是說，一次建站可以滿足多個終端的需求。

描述響應式界面最著名的一句話就是“Content is like water”，翻譯成中文便是“如果將屏幕看作容器，那麽內容就像水一樣”。

二 響應式界面的四個層次

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

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

3、同一頁面在不同操作方式（如鼠標和觸屏）下，體驗應該是統一的；

4、同一頁面在不同類型的設備（手機、平板、電腦）上，交互方式應該是符合習慣的。

三 響應式布局優點

下圖比較清楚的給出了響應式布局的優點：

四 響應式布局的缺點

有如下幾個方面缺點：

兼容各種設備工作量大，效率低下；
代碼累贅，會出現隱藏無用的元素，加載時間加長；
其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果；
一定程度上改變了網站原有的布局結構，會出現用戶混淆的情況。

五 響應式界面的基本規則：

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

2、可自由排布的內容區塊

：當頁面尺寸變動較大時，能夠減少/增加排布的列數

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

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

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

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

7、放棄使用像素作為尺寸單位：用dp尺寸等方法來確保頁面在分辨率相差很大的設備上，看起來也能保持一致。同時也要求提供的圖片應該比預想的更大，才能適應高分辨率的屏幕。否則，就會像我的Photoshop一樣出現一下這種情況：【註：這塊是引用別人的，還沒太搞明白，等搞明白了再更新】

六 幾種不同布局在線體驗

在http://www.liquidapsive.com/這個網站

這個頁面右上角有個下拉列表，選項分別是：
static 靜態布局；
fluid 流式布局；
adaptive 自適應布局；
responsive 響應式布局；

你在這幾個選項之間切換，然後縮放瀏覽器寬度，查看不同布局的效果。你會發現，響應式，算是綜合了流式和自適應。

參考資料&內容來源：

百度百科：https://baike.baidu.com/item/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80/1220833?fr=aladdin

奕聯科技：http://www.thyilian.com/

知乎：https://www.zhihu.com/question/20976405

響應式布局學習筆記【1】----基礎知識