新聞資訊

什麽是(shì)響應式(Responsive Web design)網頁設計

響應式Web設計(Responsive Web design)的(de)理念是(shì):頁面的(de)設計與開發應當根據用戶行爲(wéi / wèi)以(yǐ)及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的(de)響應和(hé / huò)調整。


具體的(de)實踐方式由多方面組成,包括彈性網格和(hé / huò)布局、圖片、CSS media query的(de)使用等。無論用戶正在(zài)使用筆記本還是(shì)iPad,我們的(de)頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等,以(yǐ)适應不(bù)同設備;換句話說(shuō),頁面應該有能力去自動響應用戶的(de)設備環境。響應式網頁設計就(jiù)是(shì)一(yī / yì /yí)個(gè)網站能夠兼容多個(gè)終端——而(ér)不(bù)是(shì)爲(wéi / wèi)每個(gè)終端做一(yī / yì /yí)個(gè)特定的(de)版本。這(zhè)樣,我們就(jiù)可以(yǐ)不(bù)必爲(wéi / wèi)不(bù)斷到(dào)來(lái)的(de)新設備做專門的(de)版本設計和(hé / huò)開發了(le/liǎo)。


Ethan Marcotte曾經在(zài)A List Apart發表過一(yī / yì /yí)篇文章"Responsive Web Design",文中援引了(le/liǎo)響應式建築設計的(de)概念:現出(chū)現了(le/liǎo)一(yī / yì /yí)門新興的(de)學科——"響應式架構(responsive architecture)"——提出(chū),物理空間應該可以(yǐ)根據存在(zài)于(yú)其中的(de)人(rén)的(de)情況進行響應。結合嵌入式機器人(rén)技術以(yǐ)及可拉伸材料的(de)應用,建築師們正在(zài)嘗試建造一(yī / yì /yí)種可以(yǐ)根據周圍人(rén)群的(de)情況進行彎曲、伸縮和(hé / huò)擴展的(de)牆體結構;還可以(yǐ)使用運動傳感器配合氣候控制系統,調整室内的(de)溫度及環境光。已經有公司在(zài)生産"智能玻璃":當室内人(rén)數達到(dào)一(yī / yì /yí)定的(de)阈值時(shí),這(zhè)種玻璃可以(yǐ)自動變爲(wéi / wèi)不(bù)透明,确保隐私。


将這(zhè)個(gè)思路延伸到(dào)Web設計的(de)領域,我們就(jiù)得到(dào)了(le/liǎo)一(yī / yì /yí)個(gè)全新的(de)概念。爲(wéi / wèi)什麽一(yī / yì /yí)定要(yào / yāo)爲(wéi / wèi)每個(gè)用戶群各自打造一(yī / yì /yí)套設計和(hé / huò)開發方案?和(hé / huò)響應式建築相似,Web設計同樣應該做到(dào)根據不(bù)同設備環境自動響應及調整。 顯然,我們無法也(yě)無需使用運動傳感器或是(shì)機器人(rén)技術,響應式Web設計更多需要(yào / yāo)的(de)是(shì)抽象思維。好在(zài),一(yī / yì /yí)些相關的(de)概念已經得到(dào)了(le/liǎo)實踐,比如液态布局、幫助頁面重新格式化的(de)media queries和(hé / huò)腳本等。但是(shì)響應式Web設計不(bù)僅僅是(shì)關于(yú)屏幕分辨率自适應以(yǐ)及自動縮放的(de)圖片等等,它更像是(shì)一(yī / yì /yí)種對于(yú)設計的(de)全新思維模式。