經(jīng)過(guò)十多年的快速發(fā)展,中國的互聯(lián)網(wǎng)如今已經(jīng)日趨成熟。隨著(zhù)3G、4G的發(fā)展和移動(dòng)通信及WEB2.0技術(shù)的提升以及近年來(lái)各種移動(dòng)智能設備的興起，移動(dòng)互聯(lián)網(wǎng)也即將會(huì )步入高速發(fā)展時(shí)期,成為一種大勢所趨。這一來(lái)就使中國互聯(lián)網(wǎng)的發(fā)展變得更加豐富、多元化了。根據DailyTech的統計，到2015年，移動(dòng)互聯(lián)網(wǎng)的用戶(hù)數量將會(huì )超過(guò)桌面用戶(hù)。對于接入移動(dòng)互聯(lián)網(wǎng)的用戶(hù)除了智能手機外，使用平板電腦甚至是電視機進(jìn)行上網(wǎng)的用戶(hù)也在不斷增加。在現今這種形勢下，我們怎樣讓設計的網(wǎng)站能夠盡量兼容更多的移動(dòng)設備來(lái)確保用戶(hù)的良好體驗，這將成為我們需要面對的一大挑戰。在這種情形下我們關(guān)心的問(wèn)題不再只是網(wǎng)頁(yè)的樣式能否在不同瀏覽器中保持兼容，而需要我們關(guān)注更多的是:設計出來(lái)的頁(yè)面如何以適應不同的設備，包括不同的系統平臺,平臺屏幕尺寸,不同的環(huán)境等。
為了可以兼容更多的設備，近幾年提出了“響應式設計”。那么就響應式設計進(jìn)行簡(jiǎn)單的分析：
一、響應式設計的理念
響應式Web設計(Responsive Web design)的理念是整個(gè)web開(kāi)發(fā)的相關(guān)頁(yè)面都能夠與不同的移動(dòng)設備兼容顯示，主要指的是入口頁(yè)面可以自動(dòng)判斷不同設備不同環(huán)境（操作系統屏幕分辨率、屏幕尺寸、屏幕定向等）用戶(hù)行為（改變窗口大小等）并根據這些不同的需求自行對頁(yè)面進(jìn)行響應式調整來(lái)兼容各種設備的正常顯示與瀏覽。涉及這種設計的技術(shù)具體方式由多方面組成，包括有CSS media query查詢(xún)、流體布局和彈性網(wǎng)格、圖片等。不管訪(fǎng)問(wèn)web頁(yè)面的用戶(hù)是何種設備終端包括(PC機、平板電腦，或者手機)在者不管對頁(yè)面進(jìn)行全屏瀏覽還是非全屏瀏覽的情況，又或者用戶(hù)對屏幕的擺放是橫向還是豎向，頁(yè)面都應該能夠識別當前訪(fǎng)問(wèn)用戶(hù)的終端環(huán)境并且自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等，以兼容不同設備。如圖1.1所示：
二、響應式設計的優(yōu)勢
1.開(kāi)發(fā)、維護、運營(yíng)成本優(yōu)勢
頁(yè)面只有一個(gè)，只是針對不同的分辨率、不同的設備環(huán)境進(jìn)行了一些不同的設計，所以在開(kāi)發(fā)、維護和運營(yíng)上，相對多個(gè)版本，能節約成本。
2.兼容性?xún)?yōu)勢
移動(dòng)設備新的尺寸層出不窮，定制的版本通常只適用于某些規格的設備，如果新的設備分辨率變化較大，則往往不能兼容，而開(kāi)發(fā)新的版本需要時(shí)間，這段時(shí)間內的訪(fǎng)問(wèn)就是個(gè)問(wèn)題，但是響應式Web設計可以提前預防這個(gè)問(wèn)題。
3.操作靈活
響應式設計是針對頁(yè)面的，可以只對必要的頁(yè)面進(jìn)行改動(dòng)，其他頁(yè)面不受影響。
三、響應式設計原則
1、移動(dòng)優(yōu)先原則
隨著(zhù)移動(dòng)互聯(lián)網(wǎng)的大舉發(fā)展，移動(dòng)設備的不斷增加，移動(dòng)終端的持有人數已經(jīng)逐漸在趕超PC機，考慮到當前的發(fā)展形勢，優(yōu)先考慮移動(dòng)設計無(wú)可厚非。有限所謂移動(dòng)優(yōu)先原則是指，整個(gè)頁(yè)面設計的流程優(yōu)先考慮到移動(dòng)設備的兼容顯示，再次前提下在考慮PC機的兼容顯示。
2、觸控優(yōu)先原則
對觸控優(yōu)先原則的考慮也是基于移動(dòng)互聯(lián)網(wǎng)的發(fā)展迅速的前提下提出的。在移動(dòng)設備終端上目前觸控是我們主要的一種人機交互方式?；谶@點(diǎn)在設計頁(yè)面上就應該優(yōu)先考慮設計出易于手指觸摸的按鈕等交互元素其次才是考慮同樣易于鼠標點(diǎn)擊的按鈕等其他元素。所以為了能夠使設計出的界面能夠兼容更多的平臺系統、設備環(huán)境等條件，網(wǎng)頁(yè)設計師應該先從觸控優(yōu)先原則入手設計頁(yè)面，之后在此基礎上對頁(yè)面進(jìn)行適當的調整以在不影響移動(dòng)設備正常顯示下，達到對PC端的兼容顯示。即使網(wǎng)頁(yè)上的相關(guān)交互元素既適合手指觸摸又適合鼠標點(diǎn)擊。
3、彈性化原則
在彈性化布局的基礎上引入CSS媒介查詢(xún)的功能使得web響應式的設計和開(kāi)發(fā)思路讓頁(yè)面真正的富有彈性。頁(yè)面布局再不會(huì )被破壞，圖片的尺寸可以被自動(dòng)調整，雖然這不是最完美的解決方案，但它給了我們一種新的選擇。這樣無(wú)論用戶(hù)切換設備的屏幕定向方式，還是從PC機屏幕轉到iPad或者手機上瀏覽，頁(yè)面都能夠作者響應與調整。
4、宏觀(guān)性原則
在響應式 Web 開(kāi)發(fā)過(guò)程中，設計人員在項目的每一個(gè)階段都要在多種瀏覽器和不同尺寸屏幕中進(jìn)行測試，以盡早發(fā)現問(wèn)題。