px, em, rem的區(qū)別：
px:絕對(duì)字體大小
em:基于一個(gè)基數(shù)來(lái)計(jì)算出相對(duì)字體大小。(移動(dòng)端用的少)
rem:基于根節(jié)點(diǎn)（html）的字體大小來(lái)計(jì)算炸客。
vw:可視區(qū)寬度單位陌选。1vw等于可視區(qū)寬度的百分之一椎镣。
em
跟字體大小有關(guān)
<style>
#container{
font-size: 20px; /*1em = 20px*/
width: 5em; /* width = 20 * 5px*/
height: 5em; /* height = 20 * 5px*/
}
#box{
width: 20em; /* width = 20 * 20px*/
height: 20em; /* height = 20 * 20px*/
}
</style>
<div id="container">
<div id="box"></div>
</div>
l瀏覽器默認(rèn)字體是16px,這里父級(jí)字體大小是20px,所以#box里的1em = 20px;即#box是一個(gè)長(zhǎng)寬均為400px的正方形
vw
vw單位和百分比很相似物邑，不同的是vw的值對(duì)所有的元素都一樣导坟，與他們父元素或父元素的寬度無(wú)關(guān)
以414寬度的屏幕為例
做一個(gè)200 * 200的盒子
<style>
html {
font-size: 4vm; /* 4 * 4.14 = 16.56*/
}
#box{
width: 12.077294685990339rem; /* 200 / 16.56 = 12.077294685990339*/
height: 12.077294685990339rem;
}
</style>
<div id='box'>
</div>
rem
rem 的字體大小直接與html的字體大小有關(guān)想罕。默認(rèn)是16px = 1rem;
我們可以給html設(shè)置10px的字體大小
html {
font-size: 10px /*即： 10px = 1rem*/
}
大多數(shù)瀏覽器（不包括ie8以下）都支持rem單位哑蔫，如果想都支持，可以
html{
font-size: 10px /* 或者 font-size: 62.5%*/ /* 10/16 = 62.5%*/
}
p{ font-size:15px; font-size:1.5rem}
可是這樣在實(shí)際開(kāi)發(fā)中弧呐，換算起來(lái)非常麻煩闸迷，所以，我們對(duì)此進(jìn)行了修改俘枫，根據(jù)手機(jī)屏幕的大小腥沽，做了自適應(yīng)。
首先鸠蚪，我們?cè)趆tml的head里邊設(shè)置html的font-size.
<style>
html{
font-size: 100px !important;
}
</style>
然后根據(jù)設(shè)計(jì)圖的尺寸和手機(jī)屏幕的尺寸進(jìn)行換算今阳。
// designWidth: 設(shè)計(jì)稿的實(shí)際寬度值
// maxWidth: 制作稿的最大寬度值
;(function(designWidth, maxWidth){
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = doc.createElement("style"),
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width > maxWidth && (width = maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px}';
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
// 要等viewport設(shè)置好后才能執(zhí)行refreshRem，不然會(huì)執(zhí)行2次
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid); // 防止執(zhí)行2次
tid = setTimeout(refreshRem, 300)
},false)
win.addEventListener("pageshow", function(e){
if(e.persisted) {
clearTimeout(tid)
tid = setTimeout(refreshRem, 300)
}
}, false)
if (doc.readyState === "complete"){
doc.body.style.fontSize = "16px"
} else {
doc.addEventListener("DOMContentLoaded",function(e){
doc.body.style.fontSize = "16px"
}, false)
}
})(750, 750)
