自適應是一套模板適應所有終端，但每種設備上看到的版式是一樣的，俗稱寬度自適應。
響應式一套模板可適應所有終端，但每種裝置看到的版式可以是不一樣的。
雖然響應式/自適應網頁設計會帶來兼容各種設備工作量大、代碼累贅、加載時間長的缺點，但它們跨平台和終端，能一次設計，普遍適用，可以根據屏幕分辨率自適應以及自動縮放圖片、自動調整佈局，它們不只是技術的實現，更多的是設計的全新思維模式。
很多網站的解決方法，是為不同的裝置提供不同的網頁，例如專門提供一個mobile版本，或是iPhone / iPad版本。這樣做固然保證了效果，但是比較麻煩，同時要維護好幾個版本，而且如果一個網站有多個portal（入口），會大大增加架構設計的複雜度。
自適應還是暴露出一個問題，如果螢幕太小，即使網頁能夠根據螢幕大小進行適配，但是會感覺在小螢幕上查看，內容過於擁擠，響應式正是為了解決這個問題而衍生出來的概念。它可以自動識別螢幕寬度、並做出相應調整的網頁設計，佈局和展示的內容可能會有所變動。
自適應的體驗http://m.ctrip.com/html5/ 響應式的體驗http://segmentfault.com/
Css秘密花園http://www.csszengarden.com/
http://caibaojian.com/demo/ued/
二，響應式基礎知識1，設定meta標籤<meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no>
這段程式碼的幾個參數解釋：
§width = device-width：寬度等於目前裝置的寬度
§initial-scale：初始的縮放比例（預設為1.0）
§minimum-scale：允許使用者縮放到的最小比例（預設為1.0）
§maximum-scale：允許使用者縮放到的最大比例（預設為1.0）
§user-scalable：使用者是否可以手動縮放（預設為no，因為我們不希望使用者放大縮小頁面）
2，媒體查詢css3的媒體查詢是響應式設計能實現的關鍵因素。你可以使用媒體查詢的特性，來依照裝置的寬度，讓頁面使用不同的css區塊。
如下的css規則會在螢幕寬度小於等於980時運作：
@media (orientation:portrait) and (max-width:460px) { .video .innerBox .news a.more { display: none; } .video .innernewsBox .news span { display: none; } .video .innerBox . { width: 100%; } .video .innerBox .news ul { width: 100%; text-align: center; }}orientation：portrait | landscape
portrait：
指定輸出裝置中的頁面可見區域高度大於或等於寬度
landscape：
除portrait值情況外，都是landscape
選擇載入CSS，如果螢幕寬度在400像素到600像素之間，則載入smallScreen.css檔案。
<link rel=stylesheet type=text/cssmedia=screen and (min-width: 400px) and (max-device-width: 600px) href=smallScreen.css />
3，百分比佈局
三，響應式頁面設計，字體，圖片的處理1，html5/css3響應式頁面的設計流程
第一步：確定需要相容的裝置類型、螢幕尺寸類型：包括行動裝置（手機、平板）和pc。對於行動設備，設計和實現的時候注意增加手勢的功能。
螢幕尺寸：包括各種手機螢幕的尺寸（包括橫向和垂直）、各種平板的尺寸（包括橫向和垂直）、普通電腦螢幕和寬螢幕。
第二步：針對確定下來的幾個尺寸分別製作不同的線框原型，需要考慮清楚不同尺寸下，頁面的佈局如何變化，內容尺寸如何縮放，功能、內容的刪減，甚至針對特殊的環境作特殊化的設計等。這個過程需要設計師和前端開發人員保持密切的溝通。
第三步：視覺設計，將圖片匯入到相應的裝置進行一些簡單的測試，可幫助我們儘早發現可訪問性、可讀性等方面存在的問題。
與傳統的web開發相比，響應式設計的頁面由於頁面佈局、內容尺寸發生了變化，所以最終的產出更有可能與設計稿出入較大，需要前端開發人員和設計師多溝通。
2，響應式字體
CSS中幾種不同單位之間的比較
px：像素（Pixel）。相對長度單位，所佔大小由螢幕解析度決定。 （配合媒體查詢）
em：相對長度單位。相當於目前物件內文字的字體尺寸，如果目前對行內文字的字體尺寸未被設置，則相對於瀏覽器的預設字體尺寸。 em的值並不是固定的，它會繼承父級元素的字體大小。所有未經調整的瀏覽器都符合: 1em=16px。則12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中宣告Font-size=62.5%，這就使em值變為16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只要將你的原來的px數值除以10，然後換上em作為單位就行了。
rem：CSS3新增的一個相對單位。與em的主要差異在於使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點於一身，透過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支援rem。對於不支援它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。
%：另外我們也可以使用百分比來指定大小，它表示目前字體相對於瀏覽器預設字體大小的倍數。該單位在頁面響應式設計中也被常用來。
html{font-size:62.5%;/* 10÷16=62.5% */}body{font-size:12px;font-size:1.2rem ;/* 12÷10=1.2 */}p{font-size :14px;font-size:1.4rem;}要注意的是，為了相容於不支援rem 的瀏覽器，我們需要在rem 前面寫上對應的px 值，這樣不支援的瀏覽器可以優雅降級。其實不用太糾結是預設的font-size:100%，還是設定為font-size:62.5%，如果你引進了CSS 預處理工具那麼自然可以使用預設值，如果因為其他原因使用font-size:62.5%也無可厚非，完全可以在body 重置回你需要的預設font-size。
3，響應式圖片影片處理
http://alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html#
1.背景圖片----媒體查詢
2.圖片液態化----彈性圖片
img, object { max-width: 100%;}https://www.filamentgroup.com/examples/responsive-images/3.HTML5 <picture> 元素
HTML5 的<picture> 元素可以設定多張圖片。
瀏覽器支援
<picture> <source srcset=images/img_smallflower.jpg media=(max-width: 400px)> <source srcset=images/img_flowers.jpg> <img src=images/img_flowers.jpg style="margin: 0px; padding 0px; outline: none; line-height: 25.2px; font-size: 14px; width: 660px; overflow: hidden; clear: both; font-family: tahoma, arial, Microsoft YaHei;"><script src=http://cdn.gbtags.com/picturefill/2.0.0/picturefill.min.js></script>4.使用noscript標籤建立回應圖片
Js動態載入大小圖片
<span class=img-placeholder></span><noscript data-mobilesrc=small.jpg data-fullsrc=big.jpg data-alttext=your alt text class=responsivize> <img src=big.jpg></noscript > <script type=text/javascript>var responsiveImageTag = { replaceInitialImages:function(respons) { var platform = desktop; var resImage = '.'+respons; var responsiveImages = $(resImage); var i, noOfresponsiveImages = responsiveImages.ledifw; <= 767){ //767px, 比ipad 小的都認為是mobile platform = mobile; } //set initial source element on image for(i = 0; i < noOfresponsiveImages; i = i + 1 ){ var noScriptElem = $(responsiveImages[ii ]); var img = window.document.createElement(img); img.alt = noScriptElem.attr(data-alttext); if(platform === mobile){ img.src = noScriptElem.attr(data-mobilesrc); }else{ img.src = noScriptElem.attr(data-fullsrc); } img .className = responsive; $('.img-placeholder').eq(i).html('').append(img); noScriptElem.hide(); } }};responsiveImageTag.replaceInitialImages('responsivize');$(window). resize(function(){ responsiveImageTag.replaceInitialImages('responsivize');});</script>四，響應式框架客製化：如果你的網站有大量多樣化的設計，那麼當你如果還想使用bootstrap就需要將框架作為底層修改：需要複寫大量樣式，CSS層次編的混亂，難以維護。
在一些場合，bootstrap是非常有用的。例如你想快速建立一個比較漂亮的個人站企業站博客後台管理介面等對頁面定制化需求不高的項目往往更適合後台項目多數後台系統瀏覽器兼容好讓步樣式也好讓步不太會細摳細節。或者你可能在建立網站前端、考慮瀏覽器相容性和數不勝數的設備尺寸上缺乏經驗，bootstrap會幫你解決很大一部分麻煩的問題