http://blog.csdn.net/ime33
未經允許，不得轉載！！
水準有限，寫的不周之處歡迎指正、交流！
在前端開發中，遇到機關的時候會有幾種選擇，那到底用哪種機關才是最合适的呢？
在國内的一些美工設計大師，在設計的時候多偏向于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 >
<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) {}同樣也很出色的！
好了，就到這裡了，感謝閱讀！
水準有限，歡迎指正、交流！！
![Vue rem 适配方案[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)