根應(yīng)設(shè)置為大于10的值，我常用的為：
html {
font-size: 100px;
}
此文太好，但未獲得作者授權(quán)。
來源：
http://caibaojian.com/web-app-rem.html
原文鏈接：http://caibaojian.com/web-app-rem.html
rem這是個(gè)低調(diào)的css單位，近一兩年開始嶄露頭角，有許多同學(xué)對(duì)rem的評(píng)價(jià)不一，有的在嘗試使用，有的在使用過程中遇到坑就棄用了。但是我對(duì)rem綜合評(píng)價(jià)是用來做web app它絕對(duì)是最合適的人選之一。·
rem是什么？
rem（font?size?of?the?root?element）是指相對(duì)于根元素的字體大小的單位。簡(jiǎn)單的說它就是一個(gè)相對(duì)單位。看到rem大家一定會(huì)想起em單位，em（font?size?of?the?element）是指相對(duì)于父元素的字體大小的單位。它們之間其實(shí)很相似，只不過一個(gè)計(jì)算的規(guī)則是依賴根元素一個(gè)是依賴父元素計(jì)算。
為什么web?app要使用rem？
這里我特別強(qiáng)調(diào)web?app，web?page就不能使用rem嗎，其實(shí)也當(dāng)然可以，不過出于兼容性的考慮在web?app下使用更加能突顯這個(gè)單位的價(jià)值和能力，接下來我們來看看目前一些企業(yè)的web app是怎么做屏幕適配的。
1、實(shí)現(xiàn)強(qiáng)大的屏幕適配布局：
最近iphone6一下出了兩款尺寸的手機(jī)，導(dǎo)致的移動(dòng)端的屏幕種類更加的混亂，記得一兩年前做web?app有一種做法是以320寬度為標(biāo)準(zhǔn)去做適配，超過320的大小還是以320的規(guī)格去展示，這種實(shí)現(xiàn)方式以淘寶web?app為代表作，但是近期手機(jī)淘寶首頁(yè)進(jìn)行了改版，采用了rem這個(gè)單位，首頁(yè)以內(nèi)依舊是和以前一樣各種混亂，有定死寬度的頁(yè)面，也有那種流式布局的頁(yè)面。
我們現(xiàn)在在切頁(yè)面布局的使用常用的單位是px，這是一個(gè)絕對(duì)單位，web?app的屏幕適配有很多中做法，例如：流式布局、限死寬度，還有就是通過響應(yīng)式來做，但是這些方案都不是最佳的解決方法。
例如流式布局的解決方案有不少弊端，它雖然可以讓各種屏幕都適配，但是顯示的效果極其的不好，因?yàn)橹挥袔讉€(gè)尺寸的手機(jī)能夠完美的顯示出視覺設(shè)計(jì)師和交互最想要的效果，但是目前行業(yè)里用流式布局切web?app的公司還是挺多的，看看下面我收集的一些案例：
上面的網(wǎng)站都是采用的流式布局的技術(shù)實(shí)現(xiàn)的，他們?cè)陧?yè)面布局的時(shí)候都是通過百分比來定義寬度，但是高度大都是用px來固定住，所以在大屏幕的手機(jī)下顯示效果會(huì)變成有些頁(yè)面元素寬度被拉的很長(zhǎng)，但是高度還是和原來一樣，實(shí)際顯示非常的不協(xié)調(diào)，這就是流式布局的最致命的缺點(diǎn)，往往只有幾個(gè)尺寸的手機(jī)下看到的效果是令人滿意的，其實(shí)很多視覺設(shè)計(jì)師應(yīng)該無法接受這種效果，因?yàn)樗麄兊脑O(shè)計(jì)圖在大屏幕手機(jī)下看到的效果相當(dāng)于是被橫向拉長(zhǎng)來一樣。·
流式布局并不是最理想的實(shí)現(xiàn)方式，通過大量的百分比布局，會(huì)經(jīng)常出現(xiàn)許多兼容性的問題，還有就是對(duì)設(shè)計(jì)有很多的限制，因?yàn)樗麄冊(cè)谠O(shè)計(jì)之初就需要考慮流式布局對(duì)元素造成的影響，只能設(shè)計(jì)橫向拉伸的元素布局，設(shè)計(jì)的時(shí)候存在很多局限性。
2.固定寬度做法
還有一種是固定頁(yè)面寬度的做法，早期有些網(wǎng)站把頁(yè)面設(shè)置成320的寬度，超出部分留白，這樣做視覺，前端都挺開心，視覺在也不用被流式布局限制自己的設(shè)計(jì)靈感了，前端也不用在搞坑爹的流式布局。但是這種解決方案也是存在一些問題，例如在大屏幕手機(jī)下兩邊是留白的，還有一個(gè)就是大屏幕手機(jī)下看起來頁(yè)面會(huì)特別小，操作的按鈕也很小，手機(jī)淘寶首頁(yè)起初是這么做的，但近期改版了，采用了rem。
3.響應(yīng)式做法
響應(yīng)式這種方式在國(guó)內(nèi)很少有大型企業(yè)的復(fù)雜性的網(wǎng)站在移動(dòng)端用這種方法去做，主要原因是工作大，維護(hù)性難，所以一般都是中小型的門戶或者博客類站點(diǎn)會(huì)采用響應(yīng)式的方法從web page到web app直接一步到位，因?yàn)檫@樣反而可以節(jié)約成本，不用再專門為自己的網(wǎng)站做一個(gè)web app的版本。
4.設(shè)置viewport進(jìn)行縮放
天貓的web app的首頁(yè)就是采用這種方式去做的，以320寬度為基準(zhǔn)，進(jìn)行縮放，最大縮放為320*1.3 = 416，基本縮放到416都就可以兼容iphone6 plus的屏幕了，這個(gè)方法簡(jiǎn)單粗暴，又高效。說實(shí)話我覺得他和用接下去我們要講的rem都非常高效，不過有部分同學(xué)使用過程中反應(yīng)縮放會(huì)導(dǎo)致有些頁(yè)面元素會(huì)糊的情況。
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
rem能等比例適配所有屏幕
上面講了一大堆目前大部分公司主流的一些web app的適配解決方案，接下來講下rem是如何工作的。·
上面說過rem是通過根元素進(jìn)行適配的，網(wǎng)頁(yè)中的根元素指的是html我們通過設(shè)置html的字體大小就可以控制rem的大小。舉個(gè)例子：
html{
font-size:20px;
}
.btn {
width: 6rem;
height: 3rem;
line-height: 3rem;
font-size: 1.2rem;
display: inline-block;
background: #06c;
color: #fff;
border-radius: .5rem;
text-decoration: none;
text-align: center;
}
Demo 上面代碼結(jié)果按鈕大小如下圖：
我把html設(shè)置成10px是為了方便我們計(jì)算，為什么6rem等于60px。如果這個(gè)時(shí)候我們的.btn的樣式不變，我們?cè)俑淖僪tml的font-size的值，看看按鈕發(fā)生上面變化:
html{
font-size:40px;
}
Demo
按鈕大小結(jié)果如下：
在上面兩個(gè)例子中我們發(fā)現(xiàn)第一個(gè)案例按鈕是等比例放大到第二個(gè)按鈕，html font-size的改變就會(huì)導(dǎo)致按鈕的大小發(fā)生改變，我們并不需要改變先前給按鈕設(shè)置的寬度和高度，其實(shí)這就是我們最想看到的，
由上面兩個(gè)的demo中我們知道改變html的font-size可以等比改變所有用了rem單位的元素，所以大家可以通過chrome瀏覽器的調(diào)試工具去切換第三個(gè)的demo在不同設(shè)備下的展示效果，或者通過縮放瀏覽器的寬度來查看效果，我們可以看到不管在任何分辨率下，頁(yè)面的排版都是按照等比例進(jìn)行切換，并且布局沒有亂。我只是通過一段js根據(jù)瀏覽器當(dāng)前的分辨率改變font-size的值，就簡(jiǎn)單的實(shí)現(xiàn)了上面的效果，頁(yè)面的所有元素都不需要進(jìn)行任何改變。·
到這里肯定有很多人會(huì)問我是怎么計(jì)算出不同分辨率下font-size的值？
首先假設(shè)我上面的頁(yè)面設(shè)計(jì)稿給我時(shí)候是按照640的標(biāo)準(zhǔn)尺寸給我的前提下，（當(dāng)然這個(gè)尺寸肯定不一定是640，可以是320，或者480，又或是375）來看一組表格。
上面的表格藍(lán)色一列是Demo3中頁(yè)面的尺寸，頁(yè)面是以640的寬度去切的，怎么計(jì)算不同寬度下font-site的值，大家看表格上面的數(shù)值變化應(yīng)該能明白。舉個(gè)例子：384/640 = 0.6，384是640的0.6倍，所以384頁(yè)面寬度下的font-size也等于它的0.6倍，這時(shí)384的font-size就等于12px。在不同設(shè)備的寬度計(jì)算方式以此類推。·
Demo3中我是通過JS去動(dòng)態(tài)計(jì)算根元素的font-size，這樣的好處是所有設(shè)備分辨率都能兼容適配，淘寶首頁(yè)目前就是用的JS計(jì)算。但其實(shí)不用JS我們也可以做適配，一般我們?cè)谧鰓eb app都會(huì)先統(tǒng)計(jì)自己網(wǎng)站有哪些主流的屏幕設(shè)備，然后去針對(duì)那些設(shè)備去做media query設(shè)置也可以實(shí)現(xiàn)適配，例如下面這樣：
html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}
面的做的設(shè)置當(dāng)然是不能所有設(shè)備全適配，但是用JS是可以實(shí)現(xiàn)全適配。具體用哪個(gè)就要根據(jù)自己的實(shí)際工作場(chǎng)景去定了。·
下面推薦兩個(gè)國(guó)內(nèi)用了rem技術(shù)的移動(dòng)站，大家可以上去參考看看他們的做法，手機(jī)淘寶目前只有首頁(yè)用了rem，淘寶native app的首頁(yè)是內(nèi)嵌的web app首頁(yè)。
淘寶首頁(yè)：m.taobao.com
D X：m.dx.com
最后我們?cè)賮砜匆豢此募嫒菪裕?/h3>
在線工具
@blinkcat，rem是可以合并雪碧圖的，viewport設(shè)置確實(shí)簡(jiǎn)潔，但是過于粗暴，全局都進(jìn)行縮放，有時(shí)候我布局并不希望全局縮放，部分布局希望不用縮放，所以使用rem，不過具體使用什么方法大家都可以根據(jù)實(shí)際情況衡量。并不是每個(gè)人都喜歡使用sass，所以在px轉(zhuǎn)rem這塊我做了一個(gè)在線轉(zhuǎn)換工具：http://520ued.com/tools/rem·
REM自適應(yīng)JS
具體使用方法請(qǐng)參考這篇文章：Rem精簡(jiǎn)版實(shí)現(xiàn)自適應(yīng)-優(yōu)化flexible.js
//designWidth:設(shè)計(jì)稿的實(shí)際寬度值，需要根據(jù)實(shí)際設(shè)置
//maxWidth:制作稿的最大寬度值，需要根據(jù)實(shí)際設(shè)置
//這段js的最后面有兩個(gè)參數(shù)記得要設(shè)置，一個(gè)為設(shè)計(jì)稿實(shí)際寬度，一個(gè)為制作稿最大寬度，例如設(shè)計(jì)稿為750，最大寬度為750，則為(750,750)
;(function(designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.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;
}
//要等 wiewport 設(shè)置好后才能執(zhí)行 refreshRem，不然 refreshRem 會(huì)執(zhí)行2次；
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid); //防止執(zhí)行兩次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { // 瀏覽器后退的時(shí)候重新計(jì)算
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);
部分文章參考：web app變革之rem
來源：前端開發(fā)博客