響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是一種流暢的方法，頁(yè)面根據(jù)檢測(cè)到的熒幕尺寸重新排列。自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)是一種網(wǎng)頁(yè)設(shè)計(jì)，瀏覽器可以加載專門為給定平臺(tái)建立的布局。

響應(yīng)式與自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)：有什么區(qū)別？

一個(gè)網(wǎng)站要想成功，就需要在設(shè)計(jì)時(shí)考慮到所有用戶。然而，熒幕尺寸可以從大型企業(yè)顯示器到極小的智能型手表，這使得在每臺(tái)設(shè)備上為網(wǎng)站提供相同的良好用戶體驗(yàn)設(shè)計(jì)變得具有挑戰(zhàn)性。

響應(yīng)式和自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)都消除了這個(gè)障礙，讓設(shè)計(jì)師能夠?yàn)槊總€(gè)用戶創(chuàng)造出色的網(wǎng)站體驗(yàn)。讓我們看看這些設(shè)計(jì)技術(shù)如何實(shí)現(xiàn)這一點(diǎn)的主要區(qū)別：

什么是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)？

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)使網(wǎng)頁(yè)的設(shè)計(jì)和布局能夠自動(dòng)適應(yīng)任何熒幕尺寸。該設(shè)計(jì)技術(shù)使用CSS媒體查詢（定制樣式表）來(lái)檢查最終用戶的設(shè)備特性。然后網(wǎng)站會(huì)相應(yīng)地呈現(xiàn)自己。 

豐田的網(wǎng)站體現(xiàn)了響應(yīng)式設(shè)計(jì)。得益于流暢的網(wǎng)格設(shè)計(jì)，主頁(yè)內(nèi)容可以毫無(wú)問(wèn)題地流入較小的屏幕。如果您從網(wǎng)站的行動(dòng)版或桌面版開始，然后慢慢改變它的大小，當(dāng)熒幕達(dá)到原始屏幕的一定百分比時(shí)，您實(shí)際上可以看到設(shè)計(jì)中斷并重新排列。

相同的內(nèi)容以相同的順序出現(xiàn)。但是，某些內(nèi)容已按比例放大或縮小以最適合新空間。更重要的是，根據(jù)訪問(wèn)者使用的平臺(tái)，一些功能已經(jīng)改變（比如水平滾動(dòng)條的工作方式）。

響應(yīng)式設(shè)計(jì)于 2010 年進(jìn)入網(wǎng)頁(yè)設(shè)計(jì)實(shí)踐，當(dāng)時(shí)Ethan Marcotte 在西雅圖的 An Event Apart 上介紹了它。他解釋了是什么導(dǎo)致他命名新的設(shè)計(jì)方法：

「在演講前的幾年里，我一直在從事更多的設(shè)計(jì)項(xiàng)目，這些項(xiàng)目要求我在獨(dú)立的行動(dòng)網(wǎng)站上工作。哎呀，甚至不是這樣：他們經(jīng)常會(huì)要求一個(gè)「iPhone網(wǎng)站」。我覺(jué)得有些不太對(duì)勁。而且它肯定感覺(jué)不可持續(xù)——我們要為每一個(gè)出現(xiàn)的新設(shè)備創(chuàng)建單獨(dú)的網(wǎng)站嗎？此外，我一直對(duì)創(chuàng)建靈活而美觀的布局感興趣?！?/p>

從那時(shí)起，這種流暢的網(wǎng)頁(yè)設(shè)計(jì)技術(shù)使消費(fèi)者能夠使用他們的智能型手機(jī)做更多的事情。它還允許企業(yè)通過(guò)更多設(shè)備接觸更多消費(fèi)者。

什么是自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)？

自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)使網(wǎng)頁(yè)能夠根據(jù)檢測(cè)到的設(shè)備加載靜態(tài)的預(yù)制布局。為了實(shí)現(xiàn)這一點(diǎn)，設(shè)計(jì)師必須根據(jù)不同的熒幕寬度創(chuàng)建不同的設(shè)計(jì)。最常見的寬度是（以像素為單位）：320、480、760、960、1200、1600

Apple有一個(gè)很好的自適應(yīng)設(shè)計(jì)示例，它需要自定義設(shè)計(jì)來(lái)使用最常見的斷點(diǎn)。如果這是一個(gè)響應(yīng)式設(shè)計(jì)，相同的內(nèi)容可能會(huì)以相同的順序出現(xiàn)在每個(gè)訪問(wèn)者的屏幕上——但自適應(yīng)設(shè)計(jì)不是動(dòng)態(tài)的。

頁(yè)面的架構(gòu)或多或少相同，具有相同數(shù)量的部分。但是，桌面和行動(dòng)裝置之間的內(nèi)容略有不同——不是在文本方面，而是在其網(wǎng)站圖像方面。

在用戶體驗(yàn)方面沒(méi)有任何損失。事實(shí)上，與將桌面屏幕上的所有內(nèi)容安裝到行動(dòng)裝置上相比，自適應(yīng)設(shè)計(jì)允許設(shè)計(jì)師更精確地使用圖像。

Aaron Gustafson 在響應(yīng)式設(shè)計(jì)之后引入了自適應(yīng)設(shè)計(jì)。他在他的《自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)：通過(guò)漸進(jìn)式增強(qiáng)制作豐富的體驗(yàn)》一書中寫到了這一點(diǎn)。

當(dāng)他在 2015 年重新出版這本書時(shí)，他有以下話要說(shuō)：

「漸進(jìn)式增強(qiáng)的理念在不斷擴(kuò)大的全球市場(chǎng)上首次亮相的每一個(gè)新的支持 Web 的熒幕都將繼續(xù)展示其光彩。事實(shí)上，我會(huì)冒險(xiǎn)宣布漸進(jìn)式增強(qiáng)在今天可能比我在 2010 年編寫自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)時(shí)更加重要?！?/p>

隨著公司越來(lái)越希望控制其內(nèi)容在智能型手機(jī)上的顯示方式，自適應(yīng)設(shè)計(jì)已永久烙印在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)與自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)：哪個(gè)更好？

在行動(dòng)網(wǎng)站設(shè)計(jì)方面，在技術(shù)方面沒(méi)有真正的贏家。這取決于您的需求、需求和資源。您可以使用網(wǎng)站構(gòu)建器（如Wix ）體驗(yàn)從概念到生產(chǎn)的有效設(shè)計(jì)過(guò)程，這些構(gòu)建器為最常用的設(shè)備建立自適應(yīng)設(shè)計(jì)。而像Editor X這樣的網(wǎng)頁(yè)設(shè)計(jì)平臺(tái)運(yùn)行在由平滑拖放驅(qū)動(dòng)的響應(yīng)式 CSS 上。

讓我們分解每個(gè)的優(yōu)缺點(diǎn)：

響應(yīng)式設(shè)計(jì)的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

跨所有平臺(tái)的一致內(nèi)容體驗(yàn)

適用于新設(shè)備，即使是具有非標(biāo)準(zhǔn)熒幕尺寸的設(shè)備

缺點(diǎn)：

較少控制網(wǎng)站在每臺(tái)設(shè)備上的呈現(xiàn)方式

如果元素以錯(cuò)誤的順序或大小重排，可能會(huì)阻礙視覺(jué)層次結(jié)構(gòu)

需要更多的設(shè)計(jì)專業(yè)知識(shí)、跨平臺(tái)測(cè)試和設(shè)計(jì)調(diào)整

由于動(dòng)態(tài)內(nèi)容需要更多工作才能加載，因此會(huì)阻礙網(wǎng)站性能

自適應(yīng)設(shè)計(jì)的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

為每個(gè)平臺(tái)和環(huán)境創(chuàng)造完美定制的體驗(yàn)

高性能，因?yàn)樵O(shè)計(jì)針對(duì)目標(biāo)設(shè)備進(jìn)行了優(yōu)化

輕松完美貼合廣告等第三方整合內(nèi)容

缺點(diǎn)：

如果所有設(shè)備上的內(nèi)容不一致，可能會(huì)對(duì) SEO 產(chǎn)生負(fù)面影響

行動(dòng)優(yōu)先的網(wǎng)頁(yè)設(shè)計(jì)

要從這些適合行動(dòng)裝置的設(shè)計(jì)策略中獲得最佳結(jié)果，最好采用行動(dòng)裝置優(yōu)先的方法，或者為最小的熒幕尺寸創(chuàng)建您的第一個(gè)設(shè)計(jì)，以避免常見的行動(dòng)設(shè)計(jì)問(wèn)題。