響應式網站（Responsive Website）是那些應用了響應式設計（Responsive Web Design，簡稱RWD）的網站。一套HTML，CSS，JavaScript代碼可以滿足不同分辨率的瀏覽需求。而自適配設計（Adaptive Web Design，簡稱AWD）網站是針對不同分辨率的客戶端伺服不同的固定樣式的頁面，服務器會根據請求頁面的客戶端UserAgent和分辨率返迴響應的一套HTML，CSS和JavaScript代碼。
如何區別頁面是響應式還是自適配
對新接觸這些概念的讀者，你可以做這樣的測試。在桌面上縮放瀏覽器窗口的大小，如果頁面樣式改變了，那麼它就是響應式設計。如果窗口縮小後，載入了另一個頁面，或者出現了水平滾動條，那麼它就不是響應式設計，而可能是自適配設計。
響應式設計
不管是響應式設計還是自適配設計，它們的宗旨都是為用戶提供一個良好的體驗。下面我們來講講響應式設計和自適配設計各自的優缺點。
響應式設計的優點
響應式設計是谷歌所推崇的一種設計方法，它通過CSS3 Media Query來找到設備的屏幕尺寸和分辨率來決定，最後呈現方式是什麼。在響應式設計中，頁面最終呈現的方式完全由客戶端來決定。也就是說，不管你使用的是桌面電腦，還是手機屏幕，或者是平板電腦，最終你的瀏覽器下載的代碼完全是一致的，不管最終屏幕顯示用不到還是用得到，這些代碼都會被下載。這種解決方式相當於提供了一個一勞永逸的方法，服務器端並不需要知道客戶端具體用的是多大的屏幕分辨率，他只需要把網頁代碼無腦地傳送給客戶端就可以了。
在之後維護頁面的過程中，我們可以看到消耗的資源和維護的時間會大大降低，因為你只要維護一套代碼便可。當今一些主流的內容管理系統，如WordPress、Joomla以及Drupal大都整合了響應式設計的模板，因此響應式設計幾乎成為了當前世界上新網站的趨勢和主流。
響應式設計帶來的另一個優點是，一個頁面只會存在一個網址。那麼對像谷歌這樣的搜索引擎來說就不必要去抓取同一個頁面的各個版本來進行緩存和解析。這也難怪為什麼谷歌會大力的去推廣和宣傳響應式設計了。
我們通常看到的響應式設計的頁面就好像拼圖遊戲，由於屏幕大小的限制，一些在右面無法顯示的模塊，就會順其自然地向下拓展。下圖就是一個典型的例子。
響應式設計根據不用屏幕分辨率放置內容
響應式設計的缺點
那麼響應式設計又有哪些缺點呢？
首先是冗餘的代碼量。由於服務器無腦地將代碼推送給客戶端，客戶端將不可避免地下載許多用不到的代碼。另外由於使用過多套樣式，客戶端必須決定使用哪套樣式來最後渲染頁面，這使得響應式設計的頁面的加載時間將遠遠多於為特定分辨率專門設計的那些頁面。
除了冗餘的代碼，還有頁面其他的元素。比如圖片，響應式設計無法決定最終設備會使用什麼尺寸的圖片。因此響應式設計的頁面，通常會是下載最大分辨率的圖片，而往往在手機上，我們沒有必要去查看如此高分辨率的圖片。當然你可能要說，這可以通過優化來解決，小屏幕會下載小尺寸的圖片。但這樣一來又和響應式設計的理念相悖了，你需要投入更多的資源來維護多個分辨率的版本，又或者是犧牲服務器端的資源和客戶端的資源。
響應式設計的第三個缺點是無法針對移動端進行特殊的用戶體驗優化。如果頁面僅僅是要呈現一些內容的話，那麼響應式設計可謂游刃有餘。可是如果是複雜頁面需要很多交互的話，那麼響應式設計就捉襟見肘了。你可以打開搜索引擎必應的主頁，你會發現在手機端和在桌面上其實是兩個頁面。為什麼功能並不復雜的頁面都要分兩個頁面來設計呢？那是對用戶體驗的考慮。
在網頁前端設計中，我們通常會關注這六個分辨率寬度：320，480，760，960，1,200，1,600。響應式設計同樣要為這六個分辨率分別設置一套呈現方式。在開發過程中，由於要兼顧各個分辨率，投入的時間也不少。所以響應式設計頁面就像一個智能手機，可以拍照片，又可以做mp3，可以看影片，當然一定可以打電話，但歸根結底只是湊合，拍照片、聽音樂、看電影都無法做到極致。
自適配設計的優點
我們再來說說自適配設計的優點。自適配設計通過客戶端的http請求獲取客戶端的瀏覽器訊息，然後服務器端會選擇專為這個環境設計的頁面伺服給客戶端。因此客戶端所呈現的頁面是最優化的。最優化體現在客戶端只需要下載自己需要的頁面元素內容從而加快了加載速度，同時針對瀏覽器版本和分辨率的頁面代碼又對用戶體驗進行了最高級別的支持。
自適配設計頁面對響應式設計頁面的速度優勢（圖片來源）
由於開發人員只需要針對一種環境進行開發，這大大降低了開發的複雜性也為開發人員提供了很大的自由度。這還讓出錯的機率大大降低。為已有網站添加新的自適配設計的移動站點並不需要對原網站進行修改，這降低了用戶體驗上的風險和對新界面不習慣的風險，還使改版的SEO風險不再存在。
自適配設計還滿足漸進增強（Progressive Enhancement）和優雅降級（Graceful Degradation）的設計理念兼容性和表現力兼備。尤其是漸進增強方面，可以參考m.taobao.com，它的用戶體驗和淘寶APP幾乎是一致的。
- 優雅降級（graceful degradation）：一開始就構建站點的完整功能，然後針對瀏覽器測試和修復。
- 漸進增強（progressive enhancement）：一開始只構建站點的最少特性，然後不斷針對各瀏覽器追加功能。
谷歌在今年的Google I/O大會上力推的Progressive Web Apps其實就是自適配設計的一次進化。包括谷歌去年推出的AMP和Google剛剛發（shan1）明（zhai4）的MIP都可以被認為是自適配設計的應用。可以說自適配設計展現出了超強的生命力。
自適配設計的缺點
自適配設置的起源是移動站，也就是m.example.com。如今我們完全可以用一個url來伺服不同的客戶端，自適配設計早已不是一個m.網站的範疇。如上所言，現在前端設計主流的分辨率有六個，因此一個m.網站也無法來定義自適配設計了。再何況要兼容不同的瀏覽器，這就需要高級的前端開發工程師來進行。因此如果你沒有一定的資源，或者在開發預算上並不理想，那麼完整高級的自適配設計設計可能並不適合你。
自適配設計的另一個缺點是SEO，由於不同的瀏覽器和瀏覽環境會看到不一樣的頁面，這往往會給搜索引擎展現兩個或多個版本的頁面內容。搜索引擎需要花費額外的資源對你的頁面進行解析，因為現代搜索引擎大都可以執行JavaScript腳本渲染頁面（Headless Browser技術）來了解你頁面的內容。如果你的url不一致，那麼更有可能產生重複內容的頁面，網站內部的鏈接也會相對變得混亂。
雖然SEO們都建議不要用JavaScript來展現內容，但實際上各個搜索引擎都已經可以運行腳本，因為否則將無法獲取一些如Angular JS框架的頁面內容。
響應式設計還是自適配設計？
響應式設計還是自適配設計？
不管是響應式設計還是自適配設計都是移動網站的解決方案，目的都是為了讓不同的用戶在不同設備上得到一致的良好體驗。我們上文已經介紹了響應式設計和自適配設計的優點和缺點，在我們進行決策使用響應式設計還是自適配設計的時候，需要考慮以下三點：
- 首先要考慮你是要新建一個網站，還是為現有的網站進行移動化部署。前者用響應式設計成本更低，而後者用自適配設計更加安全。另外自適配設計避免了重頭再建一個網站的成本和麻煩。
- 其次要量力而行，自適配設計需要更高端的開發能力。你要做好投入上百小時用來調試的準備。
- 最後是用戶體驗方面的考慮。如果你的網站交互功能較多，那麼在移動端實施自適配設計可能是一種較優的方案。反過來，如果你的網站僅僅是提供一些資訊，那麼響應式設計可能是你的首選方案。