px
px像素（pixel）：相對長度單位。相對於顯示器屏幕分辨率而言。pc端使用px倒也無所謂，可是在移動端，因為手機分辨率種類頗多，不可能一個個去適配，這時px就顯得非常無力，所以就要考慮em和rem。
em
相對於父節點的font-size，會有一些組合的問題。比如你把body的font-size定義為50%，一般地會是8px。那么你在body里字體大小就是1em=8px了。可當你定義了一個div，然后把字體設置成了75%，請問，現在的1em等於多少？這個時候你會發現，原來他繼承了body的值，現在字體更小了，變成了6px！因為em是相對於父節點的單位。這么嵌套下去你會哭......(幸好出現了rem╭(′▽`)╭(′▽`)╯)
rem
相對長度單位，指相對於根元素的字體大小的單位。rem只會相對html的值，不會受到父級的影響，這樣的好處在於：從em里的例子來講，1rem始終會等於8px。使用的時候不需要重新計算rem此時的大小。rem因為是css3增加的，所以ie8或以下請無視。
屏幕適配的幾種方法（流式布局、固定寬度、響應式、通過viewport進行縮放、使用rem）
流式布局：
在頁面布局的時候都是通過百分比來定義寬度，但是高度大都是用px來固定住，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度還是和原來一樣，實際顯示非常的不協調，這就是流式布局的最致命的缺點，往往只有幾個尺寸的手機下看到的效果是令人滿意的，其實很多視覺設計師應該無法接受這種效果，因為他們的設計圖在大屏幕手機下看到的效果相當於是被橫向拉長來一樣。 流式布局並不是最理想的實現方式，通過大量的百分比布局，會經常出現許多兼容性的問題，還有就是對設計有很多的限制，因為他們在設計之初就需要考慮流式布局對元素造成的影響，只能設計橫向拉伸的元素布局，設計的時候存在很多局限性。
固定寬度：
把頁面設置成320的寬度，超出部分留白，這樣做視覺，前端設計都挺挺開心，UI再也不用被流式布局限制自己的設計靈感了，前端也不用流式布局。但是這種解決方案也是存在一些問題，例如在大屏幕手機下兩邊是留白的，還有一個就是大屏幕手機下看起來頁面會特別小，操作的按鈕也很小
。
響應式：
響應式這種方式在國內很少有大型企業的復雜性的網站在移動端用這種方法去做，主要原因是工作大，維護性
難，所以一般都是中小型的門戶或者博客類站點會采用響應式的方法從web page到web app直接一步到位，因為這樣
反而可以節約成本，不用再專門為自己的網站做一個web app的版本。
通過viewport進行縮放：
以320寬度為基准，進行縮放，最大縮放為320*1.3 = 416，基本縮放到416都就可以兼容iphone6 plus的屏幕了，這個方法簡單粗暴，又高效。說實話我覺得他和用接下去我們要講的rem都非常高效，不過有部分同學使用過程中反應縮放會導致有些頁面元素會糊的情況。
rem等比例適配所有屏幕：
(function(){
var currClientWidth,
fontValue,
originWidth;
originWidth = 750;//ui設計稿的寬度，一般750或640
__resize();
window.addEventListener('resize', __resize, false);
function __resize() {
currClientWidth = document.documentElement.clientWidth;
if (currClientWidth > 768){
currClientWidth = 768;
}
if (currClientWidth < 320){
currClientWidth = 320;
}
fontValue = ((625 * currClientWidth) / originWidth).toFixed(2);
document.documentElement.style.fontSize = fontValue + '%';
}
})();
// 當前假如當前分辨率是375， 設計稿分辨率是750
// 750/375=0.5
// 比例關系是0.5倍
// 再算一下你要換算1rem等於多少px，
// 假如我要100， 100/16=6.25
// 把這個換算的乘以剛才得出的比例
// 0.5*625=312.5
// 最后還拼接了一個百分號 = 312.5%
// 就是在375分辨率下 1rem = 312.5%
// 312.5% * 16px = 50px
var currClientWidth,
fontValue,
originWidth;
originWidth = 750;//ui設計稿的寬度，一般750或640
__resize();
window.addEventListener('resize', __resize, false);
function __resize() {
currClientWidth = document.documentElement.clientWidth;
if (currClientWidth > 768){
currClientWidth = 768;
}
if (currClientWidth < 320){
currClientWidth = 320;
}
fontValue = ((625 * currClientWidth) / originWidth).toFixed(2);
document.documentElement.style.fontSize = fontValue + '%';
}
})();
// 當前假如當前分辨率是375， 設計稿分辨率是750
// 750/375=0.5
// 比例關系是0.5倍
// 再算一下你要換算1rem等於多少px，
// 假如我要100， 100/16=6.25
// 把這個換算的乘以剛才得出的比例
// 0.5*625=312.5
// 最后還拼接了一個百分號 = 312.5%
// 就是在375分辨率下 1rem = 312.5%
// 312.5% * 16px = 50px
通過js來判斷當前屏幕大小，進而設置html的font-size.代碼里面rem的值就是Ui設計稿上量的px除以100就是你代碼中要寫的rem值。