不少企業負責人第一次接觸到這種類型網站，都會疑惑：什么是自適應網站?什么又是響應式網站?很多人經常會對響應式布局和自適應式布局產生混淆，感覺聽著都很熟悉，字面意思也差不多，但又說不出來他們到底有啥區別，今天小編將為大家介紹這兩者到底表示的是什么以及它們之間的區別。具有一定的參考作用，希望對大家有所幫助。

什么是自適應網站

2011年，網頁設計師Aaron Gustafson在他的書《自適應網頁設計》里率先提出了自適應網頁設計的概念。

自適應網站即使用不同設備瀏覽時呈現不同的網頁，網頁內容及版式風格或相似或完全不同，和PC端屬于不同的網站模板，數據庫內或相同一致，或獨立不同，目的在于為了符合訪客的瀏覽，即通過寬度來調整網頁內容的大小，來達到不同大小的設備所看到的網站內容及布局都是一樣的。

形象的說就像是同一張照片，其大小按照不同比例縮放來展示。針對一些優化人員，更習慣于做到數據庫同步，使PC端的網址和內容與移動端的網址和內容一一對應。

什么是響應式網站

響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端，而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。

響應式網站即使用不同的設備瀏覽網站時，網站樣式風格、內容和網址都是完全一樣的，PC端和移動端屬于同一個網站模板，數據庫完全一致，也非常符合搜索引擎的優化規則。即在網站上的頁面，由于采用響應式的布局，可以在任何設備上無障礙顯示，但是網頁的樣式早已根據響應式的布局轉變成專為其他設備所準備的樣式。

響應式網站概念覆蓋了自適應，而且涵蓋的內容更多。在手機等設備上瀏覽，網頁與PC端內容相似，但布局是自動改變為專為手機等其他設備所準備的。

首先了解下傳統網站，以前傳統的網站在移動設備上瀏覽時，會出現一些字體太小、顯示不全、需要點擊頁面放大或縮小等等糟糕的情況，導致用戶訪問網站體驗效果非常差，因此很容易流失客戶。不管是自適應還是響應式網站，都是為了能夠更好的兼容不同終端設備，不用為每個設備都開發一個網站。近年來，隨著各種大屏幕移動設備的普及，自適應和響應式網站也受到了更多人的青睞，因為這兩種適應不同設備的展示。

自適應網站和響應式網站有什么區別

1、自適應是為了解決如何才能在不同大小的設備上呈現相同的網頁。手機的屏幕比較小，寬度通常在600像素以下，pc的像素一般在1000像素以上，部分配置高的筆記本在2000像素以上的也有，同樣的頁面要顯示在不同的設備上面，還要呈現出滿意的效果，不是一件容易的事情。因此就有人想出了一個辦法，能不能"一次設計，普遍適用"，讓同一張網頁自動適應不同大小的屏幕，根據屏幕的寬度，自動調節網頁的內容大小，但是無論怎么樣子，他們的主體的內容和布局是沒有變化的。

自適應網站是使用不同設備瀏覽同一個網頁的時候，網頁內容及版式風格相似或相同，數據庫內容一致，PC端和移動端使用同一套代碼結構;此方案帶來的較大好處就是在后續維護和更新網站的時候，絕大部分網站內容都只需要更新一次，大大降低人工維護成本。對于結構較復雜的網頁就不適合使用自適應方式了。

由于自適應網站可以同時更新同步pc端和移動端的數據和內容，因此也受到了更多企業用戶建站時的青睞，越來越多的用戶選擇自適應網站。

2、響應式的概念是覆蓋了自適應，但是包括的東西更多。

響應式布局是解決如何根據屏幕的大小自動調整頁面的展現方式，以及布局。自適應還是暴露出一個問題，如果屏幕太小，即使網頁能夠根據屏幕大小進行適配，但是會感覺在小屏幕上查看，內容過于擁擠，響應式正是為了解決這個問題而衍生出來的概念。它可以自動識別屏幕寬度、并做出相應調整的網頁設計，布局和展示的內容可能會有所變動。

響應式網站是使用不同設備瀏覽同一個網頁時，會跳轉到不同的URL地址上，可以實現PC端看到的網頁效果和移動端看到的網頁效果完全不同，可采用多套代碼結構，并且時間數據庫分離。

這樣做的好處是可以針對不同的終端設備做不同的適配效果，同時這樣會增加網站維護的成本，很多時候都需要PC端和手機端內容單獨更新。

3、自適應布局主要是通過檢測視口分辨率，來判斷當前訪問的設備從而進一步請求服務層，返回不同的目標頁面;而響應式布局通過檢測視口分辨率，針對不同客戶端在客戶端做代碼處理。

4、自適應布局需要做多套頁面，響應式布局只需要做一個頁面就可以。

5、自適應布局如果屏幕太小就會導致內容擁擠不美觀，而響應式布局沒有這個問題。

自適應布局是指通過JS及CSS的控制，借助rem、百分比等相對度量單位，在不同大小的設備上呈現相同的網頁。響應式布局是指據屏幕的大小自動的調整頁面的展現方式，可以實現用一個網頁自動適應不同大小的屏幕。

自適應網站與響應式網站如何選擇

在此之前，我們先了解一下網頁布局的幾種類型：

靜態布局(static layout)

流式布局(Liquid Layout)

自適應布局(Adaptive Layout)

響應式布局(Responsive Layout)

彈性布局(rem/em布局)

如果只做pc端，那么靜態布局(定寬度)是較好的選擇;

如果做移動端，且設計對高度和元素間距要求不高，那么彈性布局(rem+js)是較好的選擇，一份css+一份js調節font-size搞定;

如果pc、移動要兼容，而且要求較高，那么響應式布局是很好的選擇。

以上就是自適應網站和響應式網站之間的“是非恩怨”了，希望能解決大家一些疑惑。想要體驗自適應網站，也可以免費注冊遨游模板網站試手看看。

報紙版面截圖。