很多人經(jīng)常會對響應式布局和自適應式布局產(chǎn)生混淆，今天將為大家介紹這兩者到底表示的是什么以及它們之間的區(qū)別。具有一定的參考作用，希望對大家有所幫助。
1、什么是自適應網(wǎng)站？
2011年，網(wǎng)頁設計師Aaron Gustafson在他的書《自適應網(wǎng)頁設計》里率先提出了自適應網(wǎng)頁設計的概念。
自適應網(wǎng)站即使用不同設備瀏覽時呈現(xiàn)不同的網(wǎng)頁，網(wǎng)頁內(nèi)容及版式風格或相似或完全不同，和PC端屬于不同的網(wǎng)站模板，數(shù)據(jù)庫內(nèi)容或相同一致，或獨立不同，目的在于為了符合訪客的瀏覽，即通過寬度來調(diào)整網(wǎng)頁內(nèi)容的大小，來達到不同大小的設備所看到的網(wǎng)站內(nèi)容及布局都是一樣的。
形象的說就像是同一張照片，其大小按照不同比例縮放來展示。針對一些優(yōu)化人員，更習慣于做到數(shù)據(jù)庫同步，使PC端的網(wǎng)址和內(nèi)容與移動端的網(wǎng)址和內(nèi)容一一對應。
特點：內(nèi)容擁擠體驗不好，開發(fā)需要一套UI即可。
2、什么是響應式網(wǎng)站？
響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網(wǎng)站能夠兼容多個終端，而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的。
響應式網(wǎng)站即使用不同的設備瀏覽網(wǎng)站時，網(wǎng)站樣式風格、內(nèi)容和網(wǎng)址都是完全一樣的，PC端和移動端屬于同一個網(wǎng)站模板，數(shù)據(jù)庫完全一致，也非常符合搜索引擎的優(yōu)化規(guī)則。即在網(wǎng)站上的頁面，由于采用響應式的布局，可以在任何設備上無障礙顯示，但是網(wǎng)頁的樣式早已根據(jù)響應式的布局轉(zhuǎn)變成專為其他設備所準備的樣式。
響應式網(wǎng)站概念覆蓋了自適應，而且涵蓋的內(nèi)容更多。在手機等設備上瀏覽，網(wǎng)頁與PC端內(nèi)容相似，但布局是自動改變?yōu)閷槭謾C等其他設備所準備的。
特點：體驗更好
3、自適應和響應式的區(qū)別
自適應是為了解決如何才能在不同大小的設備上呈現(xiàn)相同的網(wǎng)頁。手機的屏幕比較小，寬度通常在600像素以下，pc的像素一般在1000像素以上，部分配置高的筆記本在2000像素以上的也有，同樣的頁面要顯示在不同的設備上面，還要呈現(xiàn)出滿意的效果，不是一件容易的事情。
因此就有人想出了一個辦法，能不能"一次設計，普遍適用"，讓同一張網(wǎng)頁自動適應不同大小的屏幕，根據(jù)屏幕的寬度，自動調(diào)節(jié)網(wǎng)頁的內(nèi)容大小，但是無論怎么樣子，他們的主體的內(nèi)容和布局是沒有變化的。
響應式的概念是覆蓋了自適應，但是包括的東西更多。
響應式布局是解決如何根據(jù)屏幕的大小自動調(diào)整頁面的展現(xiàn)方式，以及布局。自適應還是暴露出一個問題，如果屏幕太小，即使網(wǎng)頁能夠根據(jù)屏幕大小進行適配，但是會感覺在小屏幕上查看，內(nèi)容過于擁擠，響應式正是為了解決這個問題而衍生出來的概念。它可以自動識別屏幕寬度、并做出相應調(diào)整的網(wǎng)頁設計，布局和展示的內(nèi)容可能會有所變動。
4、自適應網(wǎng)站與響應式網(wǎng)站如何選擇？
在此之前，我們先了解一下網(wǎng)頁布局的幾種類型：
靜態(tài)布局（static layout）
流式布局（Liquid Layout）
自適應布局（Adaptive Layout）
響應式布局（Responsive Layout）
彈性布局（rem/em布局）
如果只做pc端，那么靜態(tài)布局（定寬度）是最好的選擇；
如果做移動端，且設計對高度和元素間距要求不高，那么彈性布局（rem+js）是最好的選擇，一份css+一份js調(diào)節(jié)font-size搞定；
如果pc、移動要兼容，而且要求較高，那么響應式布局是很好的選擇。