起初，網頁設計者都會涉及固定寬度的頁面，後來隨著顯示器越來越多，以及筆記本的普及，這時固定寬度的web頁面就無法滿足，各裝置的要求，於是就出現了一種新的布局方式————寬度自適應布局。我們平常討論的寬度自適應布局，大多指的就是寬度自適應布局。這種布局出現了兩種流派：百分比寬度布局 和 流式布局。百分比寬度布局是：寬度使用百分比，文字使用em，現在也很多使用rem了，也就是所謂的高畫質方案。 流式布局是：以google為代表的方法，漸進增強。不過已經停止了。
一開始並沒有響應式布局這個詞語，但是慢慢就出現了乙個詞——漸進增強，新詞的出現總是伴隨的舊詞一起出現，就好比3g網路出現之前，沒人知道自己手機用的是2g網路。所以3g和2g是一起出現了，技術上當然是2g技術先出現。同理，漸進增強出現之後，另乙個詞[優雅降級]也隨之出現了。
不禁有人問，「真的要給每乙個手機分別設計乙個網頁嗎？」，「真的要給電腦pc和手機分別設計不同的網頁嗎？」
那倒不用響應式布局就可以搞定
響應式布局和自適應的區別：
1.首先兩種的方式的解決問題是不一樣的。
自適應是為了解決如何才能在不同大小的裝置上呈現相同的網頁。手機的螢幕比較小，寬度通常在600畫素以下，pc的畫素一般在1000畫素以上，部分配置高的筆記本在2000畫素以上的也有，同樣的頁面要顯示在不同的裝置上面，還要呈現出滿意的效果，不是一件容易的事情。因此就有人想出了乙個辦法，能不能"一次設計，普遍適用"，讓同一張網頁自動適應不同大小的螢幕，根據螢幕的寬度，自動調節網頁的內容大小，但是無論怎麼樣子，他們的主體的內容和布局是沒有變化的。
2.響應式的概念覆蓋了自適應，但是包括的東西更多了。響應式布局可以根據螢幕的大小自動的調整頁面的展現方式，以及布局。
3.自適應還是暴露出乙個問題，如果螢幕太小，即使網頁能夠根據螢幕大小進行適配，但是會感覺在小螢幕上檢視，內容過於擁擠，響應式正是為了解決這個問題而衍生出來的概念。它可以自動識別螢幕寬度、並做出相應調整的網頁設計，布局和展示的內容可能會有所變動。
4"自適應網頁設計"的核心，就是css3引入的media jquery模組。 它的意思就是，自動探測螢幕寬度，然後載入相應的css檔案。
1 "stylesheet"
type="text/css"
2 media="screen and (max-device-width: 400px)"
3 href="tinyscreen.css" />
複製**
自適應布局和響應式布局
我根據個人理解描述一下 一套程式在多種終端裝置展示，頁面布局有2種 自適應布局和響應式布局。這二者有啥區別呢？自適應布局，就是頁面在多種終端裝置，不同解析度下，能夠正常展示，不會出現錯位，嚴重變形等，但頁面布局不變。而響應式布局，則在不同終端 不同解析度下，頁面布局 元素呈現的先後順序可能會有所變化...
響應式布局和自適應布局
一 區別 響應式布局等於流動網格布局，自適應布局等於使用固定分割點來進行布局 二 響應式布局 實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式 1 設定meta標籤 下面的檢視標籤告訴瀏覽器，使用裝置的寬度作為檢視寬度並禁止初始的縮放。在標籤裡加入這個meta標籤。2 通過 查詢來設定樣式 medi...
自適應布局與響應式布局
什麼是響應式布局 響應式布局就是實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使 在手機和平板電腦上有更好的瀏覽閱讀體驗。換句話說就是乙個 能夠相容多個終端，而不是為了每乙個終端做乙個特定的版本。什麼是自適應式布局 自適應布局就是指能忘了使網頁自適應的顯示在不同大小終端裝置上的新...