一、寫在前面的話
作為一面前端開發者，對 px 、em 、 rem 應該是再熟悉不過了，但大多數小伙伴應該都和我一樣僅僅停留在了解的層面，並不是實質性的掌握它們。本文對三者進行了詳細的總結和詳細說明，不熟悉的各位小伙伴閱讀本文一定會有所收獲，如果你對這三者已經了解的非常透徹，那本文可能對你的幫助不大。
二、簡述
px、em、rem都是計量單位，都能表示尺寸，但是有有所不同，而且其各有各的優缺點。
三、PX （pixel）
Px 表示“絕對尺寸”（並非真正的絕對），實際上就是css中定義的像素（此像素與設備的物理像素有一定的區別），利用px設置字體大小及元素寬高等比較穩定和精確。Px的缺點是其不能適應瀏覽器縮放時產生的變化，因此一般不用於響應式網站。
注：
1、像素 1024x768 的，表示的是水平方向是 1024 個像素點，垂直方向是 768個 像素點。
2、以上所述 px 為 css 中定義的像素（以下簡稱 css 像素），與實際的物理像素是有區別的，早期電腦屏幕的物理像素與 css 像素相同，但是隨着科技的發展，高精度屏幕開始出現在人們的視野中。以 iPhone 的 Retina
屏為例，其物理像素與 css 像素關系見下圖。
為此移動端瀏覽器以及某些桌面瀏覽器引入了 devicePixelRatio（DPR 設備像素比）屬性，其官方的定義為：設備物理像素和設備獨立像素的比例，也就是 devicePixelRatio = 物理像素 / 獨立像素。而 css 像素=獨立像素，由此我們可以得出 devicePixelRatio = 物理像素 / css 像素，進而可以推算出該設備上一個 css 像素代表幾個物理像素。例如 iPhone 的 retina 屏的 devicePixelRatio = 2，那么該設備上一個 css 像素相當於 2 個物理像素。了解更多像素相關知識，可以參考：https://github.com/jawil/blog/issues/21。
四、em
em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸。
注意：
1、em 的值並不是固定的
2、em 會繼承父級元素的字體大小。
3、任意瀏覽器的默認字體高都是 16px。所有未經調整的瀏覽器都符合: 1em=16px。那么 12px=0.75em,10px=0.625em。為了簡化 font-size 的換算，需要在 css 中的 body 選擇器中聲明 Font-size=62.5%，這就使
em 值變為 16px*62.5%=10px, 這樣 12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以 10，然后換上 em 作為單位就行了
綜上所述，em 作為響應式布局的單位仍舊會有一些問題， 當設置父元素的字體大小后，子元素的 em 就發生了變化，需要進行重新計算，為了解決這個問題便出現了 rem 。
五、rem
rem是CSS3新增的一個相對單位（root em，根em），這個單位引起了廣泛關注。這個單位與em有什么區別呢？區別在於使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。下面就是一個例子:
p {font-size:14px; font-size:.875rem;}
/*
注： 選擇使用什么字體單位主要由你的項目來決定，如果你的用戶群都使用最新版的瀏覽器，那推薦使用rem，如果要考慮兼容性，那就使用px,或者兩者同時使用。
*/
瀏覽器的默認字體大小為 16px , px 與 rem 轉換如下：
rem 的適配原理
動態獲取當前視口寬度 width，除以一個固定的數 W（通常取設計稿寬度），得到 rem 的值。表達式為 n = width / W，html{ font-size: n（px）}，此時的 rem = n，
因為 rem 等於根標簽的字體大小。
計算：
設計稿寬度為 W
屏幕寬度為 CW
n（px） = CW / W
html {font-size: n(px);} ==> n（px） = 1 rem （例：html: { font-size: 16px;} ==> 1rem = 16px）
假設我們需要計算一個設計稿上測得寬度為 x(px) 的 div 的 rem 值為多少，可以有以下等式：
x(px) / W = xRem / CW
==> xRem = (CW * x(px)) / W
==> xRem = (CW / W) * x(px)
==> xRem = 1rem * x(px)
假設 x = 20px --> xRem = 20rem
注： 但是注意當設計稿寬度 W = 750px 時，n = CW / W 得到的值會很小，瀏覽器會有最小字體大小為 12px 的限制，因此建議做放大 100 倍處理，即將 html 的字體大小
設置為當前計算值得 100 倍，html{font-size: (CW / W) * 100;}，此時計算 rem 只需要將設計稿尺寸除以 100 即可。
// 適配代碼如下
<script type="text/javascript"> //手機端的適配 document.addEventListener("DOMContentLoaded",function(){ document.getElementsByTagName("html")[0].style.fontSize=(document.documentElement.clientWidth/750)*100+"px"; }); window.onresize = function(){ document.getElementsByTagName("html")[0].style.fontSize=(document.documentElement.clientWidth/750)*100+"px"; } </script>
px 與 rem 的選擇？
1、對於只需要適配少部分手機設備，且分辨率對頁面影響不大的，使用px即可 。
2、對於需要適配各種移動設備，使用rem，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設備。
六、結語
好吧，好像沒啥要總結的，能堅持別人不能的堅持得，才能擁有別人不能擁有的！致大家及自己。