1、px

絕對單位，頁面按精確像素展示

2、em

em 是相對長度單位，是相對于字體大小這個屬性來計算的。參考的是父節(jié)點字體的大小，1 em 也就是父節(jié)點字體大小是多少，則1 em就是多少。如果自身定義了字體大小 font-size 則參考自身的字體大小，如果父節(jié)點和本身都沒有定義字體大小，則參考瀏覽器默認字體大小，瀏覽器的默認字體大小是16px。

整個頁面內1em不是一個固定的值。比如說：可以在body標簽聲明 font-size: 62.5%；body下的子元素比如 div 如果聲明 width: 1em ，則寬度為 10px，該 div 下的 span 字體大小聲明為 font-size: 0.5em ，則此時span的字體大小是基于div的，16*62.5*1*0.5 = 5px

3、rem

rem 也是相對長度單位，但是該單位相對于 em 就避免了重復計算，因為它相對的就只是HTML根元素。1 rem 也就是HTML根元素的字體大小是多少，則1 rem就是多少。比如 html 的 font-size 為100px，則1 rem就是100px。

html 中的所有標簽樣式凡是涉及到尺寸的（如： height,width,padding,margin,font-size。甚至，left,top等）都可以用 rem 作單位。

html {
  font-size: 62.5%;  //這里設置的是相對于設備的寬度的大小，也可以直接設置像素
}
/* 直接設置像素 */
html {
   font-size: 10px;
}

div {
  font-size: 1rem;
  width: 10rem;
}
span {
  font-size: .5rem;
}

3.1、rem適配方案（設置不同屏幕的rem表示不同的值）

3.1.1、用 JS 來適配

用 JS 代碼來調整頁面的根文檔的 font-size ，由此不同大小的屏幕的 1rem 的表示不同的值。

可以在代碼的 head 標簽里添加下面的 JS 代碼：

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',   //屏幕寬度改變事件
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);    //監(jiān)聽屏幕改變事件，一旦改變，觸發(fā)recalc方法，修改根文檔的font-size
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window); 

由上面代碼可知，當屏幕大小不一樣時，頁面的根元素 html 的 font-size 屬性也會不同，即 1rem 表示的值也會不同。

比如當屏幕寬度為 750px 時，此時 html 的 font-size 為 100 px，這也就代表著此時 1rem 表示 100px，由此你可以根據(jù)頁面設計圖來用 rem 單位來表示你的元素的大小。我們可以將設計圖調整為 750px 寬度，就可看到元素在寬度為 750px 時的大小，此時就可以用 rem 來表示元素大小。比如某 div 在750px 屏幕時寬度為 100px，高度為 300px，則可以將它的寬度設為 1rem，高度設為 3rem。

（一般來說，750那個值可以設置為設計稿的寬度，比如設計稿寬度為 1080，則上面函數(shù)中的 750 就可以改為 1080，這樣是為了開發(fā)者能直接將設計稿的 px 直接除以 100 即可換算成 rem）

其他適配方法參考：http://www.rzrgm.cn/superlizhao/p/8729190.html