更深了解RWD(自適應網(wǎng)頁設計)

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

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

而RWD又是如何達到的呢? 主要是以HTML5的標準及CSS3中的media queries來達到的。

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

RWD的優(yōu)點:

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

2. 可同時針對不同的解析度來設定，增加頁面的可用性。

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

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

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

RWD的缺點:

1. 因為在同一頁面會置入多種解析度的CSS檔案會增加頁面?zhèn)鬏斄?，載入的時間也會加長。

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

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

4. 開發(fā)時程較傳統(tǒng)網(wǎng)頁需相對多的時間。

以上提供RWD的各項優(yōu)缺點分析。

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

Internet Explore 9以上

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

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

標題名稱：更深了解RWD(自適應網(wǎng)頁設計)
鏈接URL：http://www.bm7419.com/news42/79092.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供Google、小程序開發(fā)、網(wǎng)站營銷、App設計、做網(wǎng)站、網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)