1、響應網站的(de)起源
一開始，網站會設計成固定寬度的(de)頁面。一開始電腦(nǎo)顯示器的(de)分(fēn)辨率不多(duō)，因爲那時(shí)電腦(nǎo)的(de)使用(yòng)量比較少。即使有變化(huà)，它們也(yě)是800, 900, 1050、1200等等。例如，GitHub的(de)網頁定制一個(gè)固定寬度的(de)1020px。
後來(lái)，随著(zhe)越來(lái)越多(duō)的(de)顯示器，以及筆記本電腦(nǎo)的(de)普及，這(zhè)種方式的(de)網頁出現了(le)問題。在大(dà)屏幕顯示器上，整個(gè)頁面特别小，小屏幕顯示上的(de)滾動條導緻用(yòng)戶體驗非常糟糕。爲了(le)解決如何正确顯示網站中各種不同尺寸和(hé)分(fēn)辨率的(de)設備，也(yě)出現了(le)很多(duō)方案。
提供不同的(de)版本：第一種解決方案是爲不同的(de)設備提供不同版本的(de)Web頁面。例如，一個(gè)站點爲PC、莫比爾和(hé)PAD提供三種不同的(de)版本。這(zhè)保證了(le)效果，但同時(shí)維護多(duō)個(gè)版本更麻煩，網站上有多(duō)個(gè)條目，這(zhè)将大(dà)大(dà)增加系統架構的(de)複雜(zá)性。
自适應性：後來(lái)人(rén)們開始思考，如果他(tā)們能“立即設計，普遍應用(yòng)”，也(yě)就是說，使同一頁能夠自動适應不同大(dà)小的(de)設備，從而解決不同設備的(de)不同頁面問題。這(zhè)就是所謂的(de)自适應布局解決方案。
響應：使用(yòng)自适應布局，如果設備太小，即使網頁可(kě)以匹配屏幕大(dà)小，如果内容太小，則看不清。爲了(le)解決這(zhè)個(gè)問題，一種新的(de)布局方式，即響應布局。
2、反應與适應的(de)區(qū)别
給出兩個(gè)具體例子，讓你感受到兩種效果的(de)效果。
網站響應https://www.microsoft.com/zh-cn/
自适應Web站點：http://m.ctrip.com/html5/
設計了(le)響應和(hé)自适應兩種布局方法，解決了(le)在不同大(dà)小和(hé)分(fēn)辨率的(de)設備上正确顯示網頁的(de)問題。不同的(de)是，這(zhè)兩種布局方式有不同的(de)解決方案。
布局最重要的(de)新方法之一是寬度自适應布局。我們通(tōng)常談論的(de)自适應布局大(dà)部分(fēn)是指寬度自适應布局。自适應是解決同一網頁在不同大(dà)小和(hé)分(fēn)辨率的(de)設備上呈現的(de)方法。在網頁内容和(hé)布局主題基本保持不變的(de)前提下(xià)，同一頁面自動适應不同大(dà)小和(hé)分(fēn)辨率的(de)設備，并根據設備的(de)屏幕寬度自動調整網頁内容。如下(xià)圖所示：
自适應布局：網頁的(de)内容和(hé)布局完全相同。
從上面可(kě)以看出，在使用(yòng)自适應布局時(shí)，無論屏幕大(dà)小，同一頁面的(de)内容和(hé)布局基本相同。區(qū)别隻是内容的(de)大(dà)小。
這(zhè)将造成一個(gè)問題，即如果設備太小，即使網頁能适應屏幕大(dà)小，也(yě)不會清晰到在小屏幕上顯示太多(duō)内容，這(zhè)将極大(dà)地損害用(yòng)戶體驗。
響應布局是解決這(zhè)一問題的(de)一種新的(de)布局方式。它能自動識别屏幕大(dà)小，做(zuò)出相應的(de)網頁設計調整。頁面布局和(hé)顯示内容可(kě)能會随著(zhe)屏幕大(dà)小的(de)變化(huà)而變化(huà)。如下(xià)圖所示：
響應布局：網頁的(de)内容和(hé)布局随著(zhe)屏幕的(de)大(dà)小而變化(huà)
在網上，一個(gè)網友也(yě)會用(yòng)這(zhè)樣的(de)圖片來(lái)總結一下(xià)反應和(hé)适應的(de)區(qū)别。
如上所示，對(duì)于同一頁（圖片中的(de)HTML），如果我們使用(yòng)響應布局來(lái)處理(lǐ)它，我們可(kě)以用(yòng)不同的(de)設備（計算(suàn)機、平闆電腦(nǎo)、手機）訪問頁面，最後看到布局和(hé)内容是完全不同的(de)。
如果我們采用(yòng)自适應布局來(lái)處理(lǐ)，不管接入設備有多(duō)大(dà)不同，（上面是三種不同大(dà)小的(de)手機），最後一頁的(de)内容和(hé)布局基本上是相同的(de)，即大(dà)小略有不同。
更詳細地，如下(xià)圖所示，屏幕的(de)寬度大(dà)于720像素，然後将4張圖片按一行排列：
如果屏幕寬度不超過720像素，則将4張圖片分(fēn)成兩行。
如果屏幕的(de)寬度小于600像素，則網站的(de)主要導航從平面轉向下(xià)降。
