CSS中那些px、em、pt、rem、%、dp（android）單位
水平有限，寫的不周之處歡迎指正、交流！
在前端開發中，遇到單位的時候會有幾種選擇，那到底用哪種單位才是最合適的呢？
在國內的一些美工設計大師，在設計的時候多偏向於px單位，而在國外呢，大多喜歡使用em和rem作為單位。
一、px單位（pixel相對長度單位）相對於使用者的裝置解析度而定，推薦使用。
特點：
1.低版本 IE無法調整那些使用px作為單位的字型大小，即無法使用瀏覽器的放大功能進而放大字號，但現在有所改觀。
2. 國外的大部分網站能夠調整的原因在於其使用了em或rem作為字型單位；
3. Firefox能夠調整px和em，rem，然而近96%的中國網民使用的是蛋疼的IE瀏覽器(或核心)。
二、em單位（font size of the element相對長度單位）相對於當前物件內文字的字型尺寸，如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。
特點：
1. em的值並不是固定的;
2. em會繼承父級元素的字型大小。
任意瀏覽器的預設字型高度16px（16畫素）。所有未經調整的瀏覽器都符合:
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作為單位就行了。在設計開發的時候只需對全體html設定font-size=62.5%，如用萬用字元*或html標籤{font-size:62.5%}，以便計算使用！
三、pt單位（point絕對長度單位），螢幕物理長度單位, 表示一個點，是螢幕的物理尺寸，不推薦使用。
四、%單位，繼承父元素單位
五、dp（dip）：螢幕密度
六、重點rem（font size of the root element）單位，這是近幾年才興起的流行單位，包括移動端內、WebApp已被廣泛使用。
使用rem為元素設定字型大小時，仍然是相對大小，但相對的只是HTML根元素，即相對於你設定的html的字號大小，這樣就起到了牽一髮而動全身的作用，只需要修改html根元素的字號大小，頁面裡的大小都會隨之改變。當然了相容性嘛，除了萬惡的IE8以下是不鳥的，應對也很簡單，再寫一個絕對的單位hack下就成，如span{font-size：14；font-size：3rem}即可！
相容性：
附上一個js控制根元素例項：
demo：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>http://blog.csdn.net/ime33 rem+js</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
html {
height: 100%;
width: 100%;
font-family: 'Microsoft YaHei';
font-size: 20px;
overflow: hidden;
outline: 0;
-webkit-text-size-adjust:none;
}
body {
height: 100%;
margin: 0;
overflow: hidden;
-webkit-user-select: none;
position: relative;
}
h3 {
width: 100%;
line-height: 1.5rem;
font-size: 1rem;
color: #000;
border: 1px solid #ccc;
text-align: center;
background-color: #ccc;
}
.container {
margin-top: 1rem;
margin-bottom: .5rem;
margin-right: -.5rem;
font-size: 0;
}
.item {
width: 5rem;
height: 5rem;
display: inline-block;
margin-right:.5rem;
margin-bottom: .5rem;
}
.blue-item {
background-color: #06c;
}
.org-item {
background-color: #1fc195;
}
</style>
</head>
<body>
<h3>演示rem+js</h3>
<div class="container">
<div class="item blue-item"></div>
<div class="item org-item"></div>
<div class="item blue-item"></div>
<div class="item org-item"></div>
<div class="item blue-item"></div>
<div class="item org-item"></div>
</div>
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',//orientationchange裝置旋轉 resize調整瀏覽器視窗的大小
recalc = function () {
var clientWidth = docEl.clientWidth;//裝置
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//換算
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);//火狐載入DOMContentLoaded，優先於load
})(document, window);
</script>
</body>
</html>七、題外話，在應用的時候我們也可以使用媒體查詢進行控制頁面各個適應的部分，media如@media screen and (max-width: 300px) {}同樣也很出色的！
好了，就到這裡了，感謝閱讀！
水平有限，歡迎指正、交流！！