很久很久很久以前,每個人都只有壹件衣服( Website ),不管妳有錢沒錢大家每天都只穿這壹件。
後來有人發明了舞會(移動互聯網),大家都爭先恐後地想要參加,於是壹個做「開發」的裁縫忽悠人們說進舞會最好訂做壹件專門的禮服( Mobile Site ),大家想想也對,上班和出去哈皮都穿同壹件衣服多無聊啊,舞會就要有舞會的樣子。於是乎只要有點閑錢的人都做了禮服,他和原來那件叫做 Website 的衣服是完全不壹樣的,面子不壹樣,裏子也不壹樣。
後來舞會的種類越來越多了,很多人被迫做了好多好多件禮服,於是又有壹個叫做「前端」的裁縫站出來說妳們每年要新做那麽多衣服,多費錢啊,而且壹出門鑰匙啊皮夾子啊名片都要在不同衣服裏換來換去多麻煩。妳看,我們新發明了壹個手藝叫做「Responsive Design」,只要把妳原來那件衣服稍微那麽壹改,以後去哪個舞會都可以只穿這壹件衣服,衣服的裏子永遠都差不多,但面子可以按照要求自適應不同的舞會。
於是所有人都開始換上這種響應式的衣服了。。。
什麽是響應式界面
根據維基百科及其參考文獻,理論上,響應式界面能夠適應不同的設備。描述響應式界面最著名的壹句話就是“Content is like water”,翻譯成中文便是“如果將屏幕看作容器,那麽內容就像水壹樣”。
為什麽要設計響應式界面
為何按老辦法為主流設計特殊版本呢?為什麽要費神地嘗試統壹所有設備呢?
即便是PC或Mac用戶,有查顯示只有壹半的人會將瀏覽器全屏顯示,而剩下的壹般人使用多大的瀏覽器,很難預知;
臺式機、投影、電視、筆記本、手機、平板、手表、VR……智能設備正在不斷增加,“主流設備”的概念正在消失;
屏幕分辨率正飛速發展,同壹張圖片在不同設備上看起來,大小可能天差地別。
鼠標、觸屏、筆、攝像頭手勢……不可預期的操控方式正在不斷出現。
響應式界面的四個層次
1、同壹頁面在不同大小和比例上看起來都應該是舒適的;
2、同壹頁面在不同分辨率上看起來都應該是合理的;
4、同壹頁面在不同操作方式(如鼠標和觸屏)下,體驗應該是統壹的;
5、同壹頁面在不同類型的設備(手機、平板、電腦)上,交互方式應該是符合習慣的。
響應式界面的基本規則
1、可伸縮的內容區塊:內容區塊的在壹定程度上能夠自動調整,以確保填滿整個頁面
網頁鏈接