所謂“響應(yīng)式網(wǎng)頁設(shè)計(Responsive Web Design)”也就是自適應(yīng)，就是可以自動識別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計。目前這種設(shè)計已經(jīng)出現(xiàn)在越來越多的國內(nèi)網(wǎng)站上，目前Google已經(jīng)明確表明鼓勵響應(yīng)式網(wǎng)頁設(shè)計。xVa北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

xVa北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

(圖一，響應(yīng)式網(wǎng)頁設(shè)計)xVa北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

通常在瀏覽網(wǎng)頁時，手機上和電腦上無法顯示同一個網(wǎng)頁，這也導(dǎo)致許多網(wǎng)頁設(shè)計會自動轉(zhuǎn)到特定的鏈接上，如上圖所示，無論在PC端還是移動端，網(wǎng)頁的顯示其實都是一個版本，會隨著屏幕的大小網(wǎng)頁而改變。xVa北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

下面是一些例子：xVa北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

xVa北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

(圖二：響應(yīng)式網(wǎng)頁設(shè)計例子)xVa北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

xVa北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

(圖三：迪士尼公司的網(wǎng)頁)xVa北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

使用自適應(yīng)網(wǎng)頁設(shè)計有5個好處：xVa北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

1， 隨著移動設(shè)備越來越多，可以提升用戶體驗。xVa北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

2， 該設(shè)計沒有網(wǎng)頁版本區(qū)分，所以SEO的策略保持一致。xVa北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

3， 可以避免重復(fù)內(nèi)容，專心維護這一個網(wǎng)頁。xVa北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

4， 保持網(wǎng)頁的原有鏈接。xVa北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

5， Google也建議優(yōu)先采用響應(yīng)式設(shè)計，因為無論是什么網(wǎng)頁版本都是相同的HTML、相同的內(nèi)容，Google容易處理。xVa北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

響應(yīng)式網(wǎng)頁設(shè)計對SEO是友好的，這些相關(guān)技術(shù)還在不斷演化中，還有許多尚待客服的地方。下面來說說它的缺陷：xVa北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

1， 對老版本IE支持不好，這是一個致命的問題，尤其是IE6，如果你的網(wǎng)站用戶大多還采用老版本的IE的話(建議在統(tǒng)計工具里看一下)，就不適合做響應(yīng)式網(wǎng)頁設(shè)計了。xVa北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

其實我一直想采用響應(yīng)式網(wǎng)頁設(shè)計，從新設(shè)計盧松松博客的網(wǎng)頁，但看到統(tǒng)計里的老版本IE用戶依然很多，只好放棄。xVa北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

2， 例如一些小游戲站、視頻站，如果僅僅是網(wǎng)頁采用了響應(yīng)式設(shè)計，但里面的內(nèi)容依然是只能在PC端打開的話，這時候就要認(rèn)真考慮了。xVa北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

國外copyblogger的博客提到了一個很特別的案例，就是迪士尼公司的網(wǎng)頁。他說在迪士尼網(wǎng)頁中有許多給小朋友玩的網(wǎng)頁游戲，有些游戲可以在桌上型電腦玩，但是如果使用移動設(shè)備就可以無法使用。因此這個情況下，就必須做出抉擇，放棄使用Responsive Web Design，或是修改游戲。xVa北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

寫在后：xVa北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)

從今年開始，響應(yīng)式網(wǎng)頁設(shè)計逐漸流行開來，雖然很熱門，但是并沒有太多網(wǎng)站采用這類的設(shè)計方式。xVa北京網(wǎng)站設(shè)計開發(fā),小程序開發(fā),公眾號,微信開發(fā)-云智互聯(lián)