什么是響應式布局設計？

來源： All文章

發(fā)布時間：2023-04-14 09:34:56

　　什么是響應式界面

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

　　為什么要響應式網站設計界面

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

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

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

　　響應式界面的四個層次

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

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

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

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

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

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

　　2、可自由排布的內容區(qū)塊：當頁面尺寸變動較大時，能夠減少/增加排布的列數

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

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

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

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

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

　　P.S.圖片似乎展示得不是很貼切，因為我的筆記本電腦的分辨率太高，Photoshop看起來特別?。ㄗ侄己茈y看清）

* 文章來源于網絡，如有侵權，請聯系客服刪除處理。

99re6这里有精品热视频,捆绑调教视频在线观看,国产99久久亚洲综合精品,国产综合久久久久久鬼色,精品欧美成人高清在线观看