響應式網(wǎng)頁(yè)設計(Response Web Design)淺談發(fā)布者：本站     時(shí)間：2022-03-23 13:03:19

響應式Web設計，這個(gè)話(huà)題可能是當下Web設計領(lǐng)域里討論和應用比較多的話(huà)題了，為什么要響應式Web設計?什么是響應式Web設計?

Web發(fā)展迅速，各種應用和服務(wù)層出不窮，現在打開(kāi)電腦，可能使用最多的程序應該是瀏覽器了，訪(fǎng)問(wèn)不同的網(wǎng)站，可以滿(mǎn)足人們購物，社交，獲取新聞資 訊，娛樂(lè )，等等需求。然而近幾年內，移動(dòng)設備快速崛起，移動(dòng)互聯(lián)網(wǎng)慢慢進(jìn)入人們的生活，預計未來(lái)5年內移動(dòng)設備的使用度會(huì )超過(guò)桌面計算機。所以需要您的網(wǎng) 站不僅要在桌面計算機大尺寸屏幕上可以為用戶(hù)提供友好的UI和用戶(hù)體驗，同時(shí)在小尺寸屏幕上也應該可以提供一致的用戶(hù)體驗。使得用戶(hù)可以在桌面大屏幕上和 移動(dòng)小屏幕上平滑的切換使用，同時(shí)沒(méi)有任何的不適應感覺(jué)。

響應式網(wǎng)頁(yè)設計(Response Web Design)淺談

(移動(dòng)設備趨勢：http://www.webhostingbuzz.com/blog/2011/10/19/mobile-internet-trends/)

要網(wǎng)站在桌面大尺寸屏幕上和移動(dòng)小尺寸屏幕上提供一致的用戶(hù)體驗，最直接的方法就是為每種設備及分辨率制作一個(gè)網(wǎng)站或者特定的頁(yè)面，使得移動(dòng)用戶(hù)在這些頁(yè)面里取得平滑友好的用戶(hù)體驗。但是到底有多少不同的移動(dòng)設備和屏幕分辨率呢?這種方法需要投入多少成本能?

響應式網(wǎng)頁(yè)設計(Response Web Design)淺談

(早先的數據：2005至2008年市場(chǎng)中的400余種移動(dòng)設備的統計情況

http://www.quirksmode.org/mobile/mobilemarket.html

這份統計結果已經(jīng)比較早了，隨著(zhù)時(shí)間的推移，又有很多移動(dòng)設備投入市場(chǎng)，為每種設備及分辨率制作一個(gè)網(wǎng)站或者特定的頁(yè)面，這應該是比較大的工作量，是比較耗時(shí)耗費資源的。是否可以只做一個(gè)網(wǎng)站一套頁(yè)面，既滿(mǎn)足桌面大尺寸屏幕，同時(shí)也可以滿(mǎn)足各種不同移動(dòng)設備的小尺寸屏幕。

因為有了這個(gè)問(wèn)題，才有了響應式Web設計這種方案：一個(gè)網(wǎng)站能夠兼容多種移動(dòng)設備屏幕尺寸，而不是為每種屏幕尺寸做一個(gè)特定的版本。這個(gè)概念可以說(shuō)是為移動(dòng)互聯(lián)網(wǎng)而生的。國外已經(jīng)有一些這樣的應用例子了,如: http://foodsense.is/， 此網(wǎng)站在A(yíng)ndroid 上的效果：

響應式網(wǎng)頁(yè)設計(Response Web Design)淺談

不采用響應式Web設計 news.sina.com.cn 在A(yíng)ndroid上的效果，需要用雙指進(jìn)行縮放才能友好瀏覽：

響應式網(wǎng)頁(yè)設計(Response Web Design)淺談

foodsense.is 在其它設備分辨率下的情況:

響應式網(wǎng)頁(yè)設計(Response Web Design)淺談

(iPad1/2 1024X768 橫向)

響應式網(wǎng)頁(yè)設計(Response Web Design)淺談

(iPad1/2 1024X768 縱向)

響應式網(wǎng)頁(yè)設計(Response Web Design)淺談

(iPhone4 320X480 橫向)

響應式網(wǎng)頁(yè)設計(Response Web Design)淺談

(iPhone4 320X480 縱向)

響應式網(wǎng)頁(yè)設計(Response Web Design)淺談

（ASUS Galaxy 7 480X800 縱向）

foodsense.is 可以在各種設備分辨率下，根據分辨率的不同做出響應，對菜單和圖片進(jìn)行重新布局，來(lái)滿(mǎn)足顯示的需要。這種技術(shù)就是響應式Web設計，這個(gè)概念是Ethan Marcotte在A(yíng) List Apart發(fā)表的一篇文章"Responsive Web Design" (http://www.alistapart.com/articles/responsive-web-design/) 中援引響應式建筑而得名的: “響應式建筑(responsive architecture)，物理空間應該可以根據存在于其中的人的情況進(jìn)行響應。結合嵌入式機器人技術(shù)以及可拉伸材料的應用，建筑師們正在嘗試建造一種 可以根據周?chē)巳旱那闆r進(jìn)行彎曲、伸縮和擴展的墻體結構,還可以使用運動(dòng)傳感器配合氣候控制系統，調整室內的溫度及環(huán)境光。已經(jīng)有公司在生產(chǎn)"智能玻 璃"：當室內人數達到一定的閥值時(shí)，這種玻璃可以自動(dòng)變?yōu)椴煌该?，確保隱私?！?Web借由建筑上這個(gè)概念，當設備分辨率發(fā)生變化時(shí)，根據設備分辨率，調整菜單，圖片，文字，等其它頁(yè)面DOM的狀態(tài)和布局，使得頁(yè)面仍然可以給用戶(hù)提供 友好的使用體驗。