一。自適應和響應式
先說共同點，兩者都是因為越來越多的 移動設備（ mobile, tablet device ）加入到互聯網中來而出現的為移動設備提供更好的體驗的技術。用技術來使網頁適應從小到大（現在到超大）的不同分辨率的屏幕.都是為了解決同一張頁面在不同設備分辨率上合理展示的技術。
不同點：
響應式布局：不管用戶使用的是什么設備都是在服務器把數據推送到瀏覽器后，腳本或CSS自行偵測屏幕大小后執行對應的樣式表內容，並且一直通過本地腳本在監聽屏幕大小的變化，隨時做出樣式響應的變化，所以是主動的。同一頁面在不同大小設備可能呈現不一樣的頁面效果
自適應：不同大小設備呈現同樣的頁面效果，只是文字、圖片等的大小不一樣，但是相對位置一樣。即在不同大小設備看起來一樣
如圖：
二、rem,em區別
rem,em都是順應不同網頁字體大小展現而產生的
其中，em是相對其父元素，在實際應用中相對而言會帶來很多不便
而rem是始終相對於html大小，即頁面根元素
可看下面例子
<html> <head> <tit></tit> <style type="text/css"> html{ font-size: 10px; } .content{ font-size: 1.5rem; //font-size: 1.5em; } .content p{ font-size: 1rem; //如果使用rem,p文字font-size:1*10px=10px //font-size: 1em; //如果使用em,p文字font-size: 1*1.5*10px=15px,因為其父元素是.content,所以要以父元素1.5em(1.5*10px)為准 } </style> </head> <body> <div class="content"> <p>測試文字</p> </div> </body> </html>