RWD(Responsive Web Design)可稱為自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)、回應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等等，是一種可以讓網(wǎng)頁(yè)的內(nèi)容可以隨著不同的裝置的寬度來(lái)調(diào)整畫(huà)面呈現(xiàn)的技術(shù)，讓使用者可以不需要透過(guò)縮放的方式來(lái)瀏覽網(wǎng)頁(yè)，大大的提升畫(huà)面的可瀏覽性及使用介面的親和度；然而這對(duì)于行動(dòng)商務(wù)越來(lái)越受到重視的現(xiàn)今來(lái)說(shuō)，隨之也越來(lái)越倍受重視。
近幾年，隨著行動(dòng)裝置(智慧型手機(jī)、平板)的普及，以及行動(dòng)上網(wǎng)服務(wù)的使用率越來(lái)越高，傳統(tǒng)網(wǎng)頁(yè)的標(biāo)準(zhǔn)已經(jīng)無(wú)法符合這些裝置的需求來(lái)呈現(xiàn)了，尤其是以flash制作的動(dòng)畫(huà)，受限于行動(dòng)裝置運(yùn)算力不足的限制之下，已經(jīng)沒(méi)有行動(dòng)裝置可以直接瀏覽flash制作的網(wǎng)頁(yè)了。雖然可透過(guò)一些特殊的瀏器APP軟體來(lái)觀看，但方便性卻大大的降低。
而RWD又是如何達(dá)到的呢? 主要是以HTML5的標(biāo)準(zhǔn)及CSS3中的media queries來(lái)達(dá)到的。
在HTML5的標(biāo)準(zhǔn)中，我們可以指定頁(yè)面的寬度可以依照裝置的檢視寬度來(lái)呈現(xiàn)，再利用CSS3的media queries 來(lái)設(shè)定不同寬度下使用不同的CSS來(lái)呈現(xiàn)頁(yè)面。因此設(shè)計(jì)師在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，就必須要針對(duì)不同的寬度下的畫(huà)面編寫(xiě)不同的CSS檔案供瀏覽器來(lái)讀取。
RWD的優(yōu)點(diǎn):
1. 可使用同一套原始碼來(lái)撰寫(xiě)CSS，可以減少版面重新制作的時(shí)間。
2. 可同時(shí)針對(duì)不同的解析度來(lái)設(shè)定，增加頁(yè)面的可用性。
3. 對(duì)于搜尋引擎的收錄不會(huì)造成影響，不影響SEO的結(jié)果。
4. 開(kāi)發(fā)時(shí)間較APP來(lái)說(shuō)可以快速很多。
5. 學(xué)習(xí)門檻較低，對(duì)于已經(jīng)從事網(wǎng)頁(yè)設(shè)計(jì)的人員來(lái)說(shuō)，此技術(shù)只是建構(gòu)在原本的DIV+CSS之上的一門技術(shù)，因此學(xué)習(xí)起來(lái)相對(duì)容易。
RWD的缺點(diǎn):
1. 因?yàn)樵谕豁?yè)面會(huì)置入多種解析度的CSS檔案會(huì)增加頁(yè)面?zhèn)鬏斄?，載入的時(shí)間也會(huì)加長(zhǎng)。
2. 若在各種解析度下的畫(huà)面都需校槁的話，在制作版面的時(shí)間會(huì)大大的增加。
3. 無(wú)法提供像APP般功能強(qiáng)大的功能，或是各種酷炫的拖拉效果。
4. 開(kāi)發(fā)時(shí)程較傳統(tǒng)網(wǎng)頁(yè)需相對(duì)多的時(shí)間。
以上提供RWD的各項(xiàng)優(yōu)缺點(diǎn)分析。
最后，想要可以體驗(yàn)RWD的功能前，還有一項(xiàng)最重要的基本要素，那就是瀏覽的支援度。由于RWD是建立在CSS3的基礎(chǔ)之下，因此要支援RWD也必須要支援CSS3的瀏覽器才行，以下列出各大瀏覽器支援的版本:
Internet Explore 9以上
Chrome、Firefox、Opera 使用自動(dòng)更新至最新版本即可
雖然還有些人撰寫(xiě)了JS來(lái)讓IE8以下的版本來(lái)支援CSS3等語(yǔ)法，但目前還是支援度不佳，且IE8的使用者還在不斷的減少中，因此使用新的瀏覽器才是真正體驗(yàn)RWD的最好辦法。
