1.先說說幾個前端常用的幾個單位的概論：
- 1、px (pixel，像素)：是一個虛擬長度單位，是計算機系統的數字化圖像長度單位，如果px要換算成物理長度，需要指定精度DPI(Dots Per Inch，每英寸像素數)，在掃描打印時一般都有DPI可選。Windows系統默認是96dpi，Apple系統默認是72dpi。
- 2、em(相對長度單位，相對於當前對象內文本的字體尺寸)：是一個相對長度單位，最初是指字母M的寬度，故名em。現指的是字符寬度的倍數，用法類似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。
- 3、pt (point，磅)：是一個物理長度單位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
- 4、rem（root em，根em）：是CSS3新增的一個相對單位，這個單位引起了廣泛關注。這個單位與em有什么區別呢？區別在於使用rem為元素設定字體大小時，相對大小對比的是HTML根元素。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。
2.開始進入rem教程
1.先設置header里面的meta標簽：
1 <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
2.在header寫上<script>標簽
1 <script type="text/javascript"> 2 document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px'; 3 </script>
問題：為什么要設置Html的font-size？
答：這里是設置html標簽的font-size，上面概論紅色字寫的很清晰，頁面元素使用rem單位時，是相對於這個html標簽的font-size的大小為基礎的。
問題：為什么是clientWidth/640?為什么要乘以100？
答：
1.是因為這里是作為一個基礎數值，換個方向去想，這里先不乘以100以免產生誤解。
例如：設計稿寬度是640px，有一個元素設計稿上的寬度是50px，設備物理寬度是320px,那么我們在頁面上應該設置寬度為 width:50rem，相當於寬度是：50*（320/640）=25px；這里能正確算出在320px的設備上剛好占一半,其實可以想象為 rem=（320/640）。
2.一般瀏覽器的最小字體是12px，如果html的font-size=（320/640）px，相當於font-size=0.5px，那么這個數值就小於12px，會造成一些計算的錯誤，和一些奇怪的問題，*100后，font-size是50px，就可以解決這種字體小於12px的問題。
3. 為了計算方便 我們后面把比率乘以了100，（320/640）*100，那么相對應這個元素在設置數值的時候就需要除以100了（50/100）,這樣可以保證最后出來的數值不變.
3.設置好html的font-size,那么我們下面就可以開始編寫根據設計稿的例子了。
設計稿是640px，有一個紅色盒子寬高都是320px，里面的文字是32px，那么下面是這個例子的代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
</script>
</head>
<body style="margin: 0 ;padding: 0;font-size: 0.32rem">
<div style="width: 3.2rem;height: 3.2rem ;background: red">
<span>danny.xie</span>
</div>
</body>
</html>
1.在iphone5下的情況，設備的物理像素是320px
1.在iphone6下的情況，設備的物理像素是375px
可以看到字體的大小和紅色盒子的寬高跟設計稿上面的比例是保持一致的，這樣就是rem適配不同設備的的基本用法，如上文有錯誤，歡迎指出和討論，十分感謝。