響應式網頁設計：web產品RWD概念

RWD（Responsive Web Design）

可稱為自適應網頁設計、響應式網頁設計、響應式網頁設計等等，是一種可以讓網頁的內容可以隨著不同的裝置的寬度來調整畫面呈現的技術，讓使用者可以不需要透過縮放的方式來瀏覽網頁，大大的提升畫面的可瀏覽性及使用界面的親和度；然而這對于行動商務越來越受到重視的現今來說，隨之也越來越倍受重視。

　　近幾年，隨著行動裝置（智慧型手機、平板）的普及，以及行動上網服務的使用率越來越高，傳統網頁的標準已經無法符合這些裝置的需求來呈現了，尤其是以flash制作的動畫，受限于行動裝置運算力不足的限制之下，已經沒有行動裝置可以直接瀏覽flash制作的網頁了。雖然可透過一些特殊的瀏器APP軟件來觀看，但方便性卻大大的降低。

　　而RWD又是如何達到的呢？

　　主要是以HTML5的標準及CSS3中的media queries來達到的。

　　在HTML5的標準中，我們可以指定頁面的寬度可以依照裝置的檢視寬度來呈現，再利用CSS3的media queries來設定不同寬度下使用不同的CSS來呈現頁面。因此設計師在設計網頁時，就必須要針對不同的寬度下的畫面編寫不同的CSS檔案供瀏覽器來讀取。

　　RWD的優點：

　　1.可使用同一套原始碼來撰寫CSS，可以減少版面重新制作的時間。

　　2.可同時針對不同的分辨率來設定，增加頁面的可用性。

　　3.對于搜尋引擎的收錄不會造成影響，不影響SEO的結果。

　　4.開發時間較APP來說可以快速很多。

　　5.學習門坎較低，對于已經從事網頁設計的人員來說，此技術只是建構在原本的DIV+CSS之上的一門技術，因此學習起來相對容易。

　　RWD的缺點：

　　1.因為在同一頁面會置入多種分辨率的CSS檔案會增加頁面傳輸量，加載的時間也會加長。

　　2.若在各種分辨率下的畫面都需校槁的話，在制作版面的時間會大大的增加。

　　3.無法提供像APP般功能強大的功能，或是各種酷炫的拖拉效果。

　　4.開發時程較傳統網頁需相對多的時間。

　　以上提供RWD的各項優缺點分析。

　　最后，想要可以體驗RWD的功能前，還有一項最重要的基本要素，那就是瀏覽的支持度。由于RWD是建立在CSS3的基礎之下，因此要支持RWD也必須要支持CSS3的瀏覽器才行，以下列出各大瀏覽器支持的版本：

　　?Internet Explore 9以上

　　?Chrome、Firefox、Opera使用自動更新至最新版本即可

　　雖然還有些人撰寫了JS來讓IE8以下的版本來支持CSS3等語法，但目前還是支持度不佳，且IE8的使用者還在不斷的減少中，因此使用新的瀏覽器才是真正體驗RWD的最好辦法。

　　本篇文章整理簡單的介紹了RWD的基本觀念，并分析其優缺點，讓有意使用RWD的人們對于此技術有更多的了解。