先簡(jiǎn)單的一句話介紹一下rem：
rem是相對(duì)于根元素html的字號(hào)(以px為單位）來(lái)計(jì)算寬高的。
rem布局開(kāi)發(fā)Web App的不錯(cuò)選擇。
具體舉個(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;
}
現(xiàn)在font-size為20（即1rem 等于 20px)雁比，效果如下所示：
20倍.png
現(xiàn)在我們把
font-size設(shè)置為50（即1rem 等于 50px)椒功，效果如下：
50倍.png
在項(xiàng)目中為了方便使用窗骑，一般會(huì)把
html的font-size設(shè)置為10或者是100凛忿。font-size:10px時(shí)，1rem等于10px樱衷，2rem等于20px棋嘲，以此類推。
也就是說(shuō)：
html的font-size可以等比改變所有用了rem單位的元素
那不同分辨率下矩桂，怎么辦呢沸移？
首先假設(shè)上面的頁(yè)面是按照640的標(biāo)準(zhǔn)尺寸編寫的，那么看一個(gè)對(duì)比圖：
image.png
通過(guò)上邊的圖表可以看出侄榴，如果我們要把640的換成480的雹锣，480/640=0.75，那么在480寬度下癞蚕，其
html的font-size也是20px*0.75=15px蕊爵，所以如果要適配480的，可將其html的font-size也是20px/0.75=26.67px在項(xiàng)目中桦山，可以通過(guò)JS去動(dòng)態(tài)計(jì)算根元素的
font-size攒射，這樣的好處是所有設(shè)備分辨率都能兼容適配；也可以針對(duì)一些主流的屏幕設(shè)備去做media query設(shè)置’（不能兼容所有設(shè)備）恒水，如下所示（具體根據(jù)實(shí)際工作場(chǎng)景確定）：
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è)備之外会放，項(xiàng)目開(kāi)發(fā)中我們還需要考慮瀏覽器的兼容性：
rem兼容.png
未完待續(xù)......
