第一點：自適應的目的是在不同解析度的不同裝置上面顯示相同的頁面。

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

響應式的概念應該是覆蓋了自適應，但是包括的東西更多了。響應式佈局可以根據螢幕的大小自動的調整頁面的展現方式，以及佈局。

響應式佈局的一些技術點紀錄：

 (1)允許網頁的寬度自動的調整

(2)儘量少使用絕對的寬度，多點百分比

(3)相對大小的字型:字型不要使用px寫死，最好使用相對大小的em，或者高清方案rem，這個不限制與字型，別的屬性也可以這麼設定

(4)流式佈局，float等float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢位），避免了水平滾動條的出現。

(5)選擇載入css，<link rel="stylesheet" type="text/css"media="screen and (max-device-width: 400px)"href="tinyScreen.css" />，這個意思是如果螢幕寬度小於400畫素（max-device-width: 400px），就載入tinyScreen.css檔案。