自適應：

在不同分辨率下不同設備上顯示相同的頁面。即：根據屏幕的寬度，自動調節網頁內容的大小，使其主體內容和布局不變。

響應式：

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

(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文件。

自適應和響應式區別以及寫法