rem 是指相對於根元素的字體大小的單位。簡單的說它就是一個相對單位。
為什么web app要使用rem？
1、實現強大的屏幕適配布局：
iphone6一下出了兩款尺寸的手機，導致的移動端的屏幕種類更加的混亂，記得一兩年前做web app有一種做法是以320寬度為標准去做適配，超過320的大小還是以320的規格去展示，這種實現方式以淘寶web app為代表作，但是近期手機淘寶首頁進行了改版，采用了rem這個單位，首頁以內依舊是和以前一樣各種混亂，有定死寬度的頁面，也有那種流式布局的頁面。
我們現在在切頁面布局的使用常用的單位是px，這是一個絕對單位，web app的屏幕適配有很多中做法，例如：流式布局、限死寬度，還有就是通過響應式來做，但是這些方案都不是最佳的解決方法。
例如流式布局的解決方案有不少弊端，它雖然可以讓各種屏幕都適配，但是顯示的效果極其的不好，因為只有幾個尺寸的手機能夠完美的顯示出視覺設計師和交互最想要的效果，其他布局如：固定寬度，viewport等都有相對缺陷。 而rem能等比例適配所有屏幕
上面說過rem是通過根元素進行適配的，網頁中的根元素指的是html我們通過設置html的字體大小就可以控制rem的大小。 2、沒有屏幕字體縮放問題：
px像素會在某些瀏覽器設置頁面縮放比的情況下，下字體不按比例縮放。rem是相對大小，沒有這種問題
3、沒有em多次使用計算麻煩的問題：
em是相對於父元素的大小，當層級較多，需要使用時，容易遇到無法預知的風險，也麻煩，而rem統一相對根元素，沒有這種弊端。
以下便是我在網頁中對於rem和px進行轉換時用到的js：
當然在引入此處js的時候還需要把jQuery類庫引入進去...
$(function(){
var a=document.body.clientWidth;
// 獲取當前可視區域的寬度
var b = a / 750;
// ios的寬度為750
var c = b * 6.25;
// 默認html為16px，62.5%就是10px
var d = c * 100 + "%";
document.getElementById("html").style.fontSize = d;
})
