什么是響應(yīng)式布局設(shè)計(jì)？

　　什么是響應(yīng)式界面

　　根據(jù)維基百科及其參考文獻(xiàn)，理論上，響應(yīng)式界面能夠適應(yīng)不同的設(shè)備。描述響應(yīng)式界面最的一句話就是“Contentislikewater”，翻譯成中文便是“如果將屏幕看作容器，那么內(nèi)容就像水一樣”。

　　為什么要響應(yīng)式網(wǎng)站設(shè)計(jì)界面

　　為何按老辦法為主流設(shè)計(jì)特殊版本呢？為什么要費(fèi)神地嘗試統(tǒng)一所有設(shè)備呢？

　　即便是PC或Mac用戶，有查顯示只有一半的人會(huì)將瀏覽器全屏顯示，而剩下的一般人使用多大的瀏覽器，很難預(yù)知；

　　臺(tái)式機(jī)、投影、電視、筆記本、手機(jī)、平板、手表、VR……智能設(shè)備正在不斷增加，“主流設(shè)備”的概念正在消失；屏幕分辨率正飛速發(fā)展，同一張圖片在不同設(shè)備上看起來，大小可能天差地別。鼠標(biāo)、觸屏、筆、攝像頭手勢(shì)……不可預(yù)期的操控方式正在不斷出現(xiàn)。

　　響應(yīng)式界面的四個(gè)層次

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

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

　　4、同一頁面在不同操作方式（如鼠標(biāo)和觸屏）下，體驗(yàn)應(yīng)該是統(tǒng)一的；

　　5、同一頁面在不同類型的設(shè)備（手機(jī)、平板、電腦）上，交互方式應(yīng)該是符合習(xí)慣的。

　　響應(yīng)式界面的基本規(guī)則

　　1、可伸縮的內(nèi)容區(qū)塊：內(nèi)容區(qū)塊的在一定程度上能夠自動(dòng)調(diào)整，以確保填滿整個(gè)頁面

　　2、可自由排布的內(nèi)容區(qū)塊：當(dāng)頁面尺寸變動(dòng)較大時(shí)，能夠減少/增加排布的列數(shù)

　　3、適應(yīng)頁面尺寸的邊距：到頁面尺寸發(fā)生更大變化時(shí)，區(qū)塊的邊距也應(yīng)該變化

　　4、能夠適應(yīng)比例變化的圖片：對(duì)于常見的寬度調(diào)整，圖片在隱去兩側(cè)部分時(shí)，依舊保持美觀可用

　　5、能夠自動(dòng)隱藏/部分顯示的內(nèi)容：如在電腦上顯示的的大段描述文本，在手機(jī)上就只能少量顯示或全部隱藏

　　6、能自動(dòng)折疊的導(dǎo)航和菜單：展開還是收起，應(yīng)該根據(jù)頁面尺寸來判斷

　　7、放棄使用像素作為尺寸單位：用dp尺寸等方法來確保頁面在分辨率相差很大的設(shè)備上，看起來也能保持一致。同時(shí)也要求提供的圖片應(yīng)該比預(yù)想的更大，才能適應(yīng)高分辨率的屏幕。否則，就會(huì)像我的Photoshop一樣出現(xiàn)一下這種情況：

　　P.S.圖片似乎展示得不是很貼切，因?yàn)槲业墓P記本電腦的分辨率太高，Photoshop看起來特別小（字都很難看清）