rem是什么？
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。
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;
}
上面代码结果按钮大小如下图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rem测试页面</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<link rel="stylesheet" href="../base/reset.css"/>
<link rel="stylesheet" href="girl.css" />
</head>
<script type="text/javascript">
new function (){
var _self = this;
_self.width = 640;//设置默认最大宽度
_self.fontSize = 100;//默认字体大小
_self.changePage = function(){
var p = (document.documentElement.getBoundingClientRect().width)/_self.width;
console.log(p);
document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+p*_self.fontSize+"px !important");
};
_self.changePage();
window.addEventListener("resize",function(){_self.changePage();},false);
};
</script>
<!--注释-->
<!--设置如上js代码，动态计算，给html、body设置font-size大小，-->
<!--在iPhone5上为50px；-->
<!--例如，用户头像宽高为25px；则设置为0.5rem，宽高就会随屏幕大小自适应-->
<body>
<div class="content">
<section class="head-wrapper">
<div class="head-img"></div>
<div class="head-name">小学妹</div>
<div class="head-task">
<div class="task-img"></div>
<div class="task-text">我的任务</div>
</div>
</section>
<section class="banner-wrapper">
<div class="banner-img"></div>
</section>
<section class="task-wrapper">
<div class="task-item">
<div class="task-head"></div>
<div class="task-name">Enson 完成了一个关于清华大学的任务</div>
</div><div class="task-item">
<div class="task-head"></div>
<div class="task-name">Enson 完成了一个关于清华大学的任务</div>
</div>
</section>
<section class="foot-wrapper">
<div class="foot-btn">求帮忙</div>
<div class="foot-btn">去帮忙</div>
</section>
</div>
</body>
</html>
以上是页面布局和js动态计算html font-size小心的代码，页面元素大小都用rem单位进行设置，当然有的元素宽度可以用百分比进行设置，大家可以参照demo进行学习。
2017-09-28 更新
*上面所写的方法中，根据手机屏幕的宽度用js动态给html赋值font-size的方法可以用 font-size:62.5%;和@media进行替代。能够达到同样的效果，同时也减少了代码量。如下：
@media only screen and (min-width: 320px) {
html{
font-size: 52.5%;
}
}
@media only screen and (min-width: 375px) {
html{
font-size: 62.5%;
}
}
@media only screen and (min-width: 414px) {
html{
font-size: 72.5%;
}
}
通过@media 媒体查询属性来动态给html赋值。效果如下
