響應式網頁設計：互聯網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的最好辦法。

　　本篇文章由程序員客棧（www.proginn.com）整理簡單的介紹了RWD的基本觀念，並分析其優缺點，讓有意使用RWD的人們對於此技術有更多的瞭解。