在剛接觸CSS時，px用的比較多，也很好理解，可是用久了就會發現有些缺陷，特別是在做響應式開發的時候。
那這么多單位到底在什么時候用什么單位合適呢？今天就來探討一下。
先大致解釋一下這些單位的意思：
1、px
px單位名稱為像素，像素是固定大小的單元,用於屏幕媒體(即在電腦屏幕上讀取)。一個像素等於電腦屏幕上的一個點 (是你屏幕分辨率的最小分割)。許多網頁設計師在web文檔使用像素單位以生產瀏覽器渲染的像素完美呈現的網站。
像素單元的一個問題是,它沒有為視障讀者的擴展,以適應移動設備。
2、em
em單位名稱為相對長度單位。相對於當前對象內文本的字體尺寸，如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸，國外使用比較多；
em單位有如下特點
1. em的值並不是固定的;
2. em會繼承父級元素的字體大小。
我們在寫CSS的時候如果要用em為單位，需要注意以下幾點：
1. body選擇器中聲明Font-size=62.5%;
2. 將你的原來的px數值除以10，然后換上em作為單位;
3. 重新計算那些被放大的字體的em數值。避免字體大小的重復聲明。
我們知道任意瀏覽器的默認字體高都是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是繼承父元素的字體大小，可是當父元素字體大小改變時，又得重新計算了，這不怎么方便，還好rem解決了這個問題
3、rem
rem是CSS3新增的一個相對長度單位，只相對根目錄即HTML元素
所以我們只要在html標簽上設置字體大小為標准，文檔中的字體大小都會以此為參照
html{font-size:62.5%; /* 10÷16=62.5% */}
body{font-size:12px;font-size:1.2rem ; /* 12÷10=1.2 */}
p{font-size:14px;font-size:1.4rem;}
兼容性：IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持，為了兼容不支持 rem 的瀏覽器，我們需要在 rem 前面寫上對應的 px 值，這樣不支持的瀏覽器可以優雅降級。
在配合響應式網頁中建議根據媒體查詢來改變font-size的大小
html{font-size:20px;} /*chorme下設置為10px無效，推薦設置為20px，1rem=20px*/
@media screen and (max-width:768px){ /*手機屏幕*/
html{font-size: 15px;}
}
@media screen and (min-width: 768px) and (max-width:992px){ /*平板屏幕*/
html{font-size: 20px;}
}
@media screen and (min-width: 992px){ /*電腦屏幕*/
html{font-size: 25px;}
}
4、%
百分比單位更像“em”單位,除了一些根本性的差異。首先,當前的字體大小等於100%(比如12 pt = 100%)。當使用百分比單位,你的文字在移動設備上仍然保持完全的可伸縮性和可訪問性。
一般來說,1 em = 16 px = 100%
個人總結：在一般的PC端網頁制作過程中，px和em用的比較多，在移動端一般采用rem。
總結的不好請見諒！