先簡單的一句話介紹一下rem：
rem是相對于根元素html的字號(以px為單位）來計算寬高的。
rem布局開發(fā)Web App的不錯選擇。
具體舉個例子
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設置為50（即1rem 等于 50px)，效果如下：
50倍.png
在項目中為了方便使用，一般會把
html的font-size設置為10或者是100。font-size:10px時，1rem等于10px，2rem等于20px，以此類推。
也就是說：
html的font-size可以等比改變所有用了rem單位的元素
那不同分辨率下，怎么辦呢？
首先假設上面的頁面是按照640的標準尺寸編寫的，那么看一個對比圖：
image.png
通過上邊的圖表可以看出，如果我們要把640的換成480的，480/640=0.75，那么在480寬度下，其
html的font-size也是20px*0.75=15px，所以如果要適配480的，可將其html的font-size也是20px/0.75=26.67px在項目中，可以通過JS去動態(tài)計算根元素的
font-size，這樣的好處是所有設備分辨率都能兼容適配；也可以針對一些主流的屏幕設備去做media query設置’（不能兼容所有設備），如下所示（具體根據(jù)實際工作場景確定）：
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;
}
}
除了兼容不同分辨率的設備之外，項目開發(fā)中我們還需要考慮瀏覽器的兼容性：
rem兼容.png
未完待續(xù)......
